@import url('https://fonts.googleapis.com/css2?family=REM:ital,wght@0,300;0,500;0,700;0,800;1,500&family=Share+Tech+Mono&family=UnifrakturCook:wght@700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=Kdam+Thmor+Pro&family=Rufina&family=Share+Tech+Mono&display=swap");
			

*       {
        font-family: "Kdam Thmor Pro",  sans-serif;
        box-sizing:border-box;
        margin: 0;
        padding: 0;
        /* touch-action: none;*/
        user-select:none; 
        }
body    {
        /* background-image: url("/content/gui/brushup-title-dark.png");
        background-size: 5dvmin;
        background-repeat:round; */
        background-color: rgb(0, 31, 74);
        overflow: hidden;
        }

#video, #canvas { 
        float: left; margin: 0; padding: 0; border: thin solid black;}

.version{       
        background-color: rgb(101, 46, 1); 
        color: rgb(255, 177, 42); 
        border:thin solid rgb(255, 177, 42); 
        font-family: 'Courier New', Courier, monospace;
        font-size:2rem;
        white-space:pre;
}

#title  { 
        position: absolute; top: 10dvmin; left: 0; width: 100dvw; 
        font-size: 16dvmin; text-align: center;	font-weight: 700; color:gold; text-shadow: 1dvmin 1dvmin 2dvmin black, -.3dvmin -.3dvmin 1dvmin white;
        line-height: .3;
        }	  
#sub    { 
        font-size: .22em; font-weight: 500; color: rgb(251, 242, 192);}		  
#alert  {     
        position: absolute; top: 10dvmin; left: 0; width: 100dvw; 
        padding: 5dvmin; 
        font-size: 11dvmin; text-align: center;	font-weight: 500; line-height: .9; 
        color:red; text-shadow: 1dvmin 1dvmin 2dvmin black, -.3dvmin -.3dvmin 1dvmin white;
        }	

button  {           pointer-events: all; }  
button#install {
        position: absolute;
        top: 30dvh;
        left: 8dvw;
        width: fit-content;
        padding: 1dvmin 3dvmin;
        z-index: 9;
        /* padding: 2dvmin; */
        font-size: 4dvmin;
        text-align: center;
        font-weight: 500;
        line-height: 1.1;
        color:black;
        text-shadow: .1dvmin .2dvmin .7dvmin rgba(255, 251, 120, 0.867);
        background-color: rgba(255, 239, 95, 0.73);
        border: 5px solid gold;
        border-radius: 2dvmin;
        box-shadow: 0 0 3dvmin 2dvmin rgba(120, 194, 255, 0.867);
        }	
button#install img { display: block; width: 25dvmin; margin: 1dvmin auto 2dvmin auto; }	        

button#permission-alert {  

        background:rgb(82, 11, 11);
        color: white;
        font-size: 5dvmin; text-align: center;	font-weight: 500; line-height: 1.1;     
        padding: 2dvmin;
        border: 3px solid gold; border-radius: 4dvmin;
        box-shadow: 0 0 23dvmin 2dvmin rgba(120, 194, 255, 0.867); 
        flex-basis: 100%; 
        margin:2dvh 17dvw;
        line-height: 1.5;       
        background:rgb(235, 221, 69);
        color: rgb(49, 2, 2);
        }
        
button#permission-alert.error {
        background:rgb(82, 11, 11);
        color: white;
        }


.overlay {
        position: absolute; top: 0; left: 0; width: 100dvw; height: 100dvh; 
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        pointer-events: none;
        }
.overlay >* { pointer-events: all; } /* restore pointer events to children */


.z0 {     z-index: 0;  }
.z1 {     z-index: 1;  }
.z2 {     z-index: 2;  }
.z3 {     z-index: 3;  }
.z4 {     z-index: 4;  }
.z5 {z-index: 15;}
.z6 {     z-index: 6;  }
.z7 {     z-index: 7;  }
                
#gui    {       
        color: white;
        border: thin solid white;
        background-image: url("/content/gui/lockscreen.png");
        background-color: rgba(0, 0, 0, 0.6);
        background-size:cover;
        background-repeat: no-repeat;
        background-position: center center;
        font-size: 18px;
        font-weight: 800;
        } 		
        
#gui.clear  {
        background: none;
       /* display: flex;
        align-items: center;
        justify-content: space-evenly;
        justify-content: center; */
        gap: 15%;
        display: grid;
}







/**********************************************************************************************/
/***                                   FORMS                                          ***/
/**********************************************************************************************/
form {
        position: absolute; top: 2dvh; left: 2dvw; width: 96dvw; height: 96dvh; z-index: 10; 
        color: rgb(117, 179, 210);
        border: thin solid white; 
        background-color: #97e5ff72;
        /* background-image: url("/content/gui/dashboardbackground.jpg");
        background-size:cover; 
        background-repeat: no-repeat;
        background-position: center center; */
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
     }

.placeholder {
        display: inline;
        color: rgba(255, 217, 0, 0.32);
        font-size: 1.3rem;
        padding: 1.5rem;

     }



/**********************************************************************************************/
/***                                    MATCH GAME                                          ***/
/**********************************************************************************************/
#matchgame {
        position:fixed;
        top   :1dvh;
        left:2dvw;
        z-Index: 1;
        width :96dvw;
        height: 98dvh;
        /* background-image: url("/content/gui/bluebg.jpg");
        background-size:cover; */
        background-Color:#000455c4;
        color:gold;
        font-Family:monospace;
        padding:2dvh 2dvw;
        margin :0.5em;
        border-radius: 3dvw;
        border: .5dvw double rgb(0, 169, 199);
        display:flex;
        flex-direction:column;
        align-content: center;
        justify-content: center;
        gap: 0dvh;
  }


  #matchgame #score {
        display:flex;
        flex-direction:row;
        width: 100dvw;
        justify-content: center;
  }

  #matchgame .score {
        width: 12dvmin;  
        height: 12dvmin; 
        transition: all .7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        background-image:  url("/content/gui/toothstar/undefined.png");
        background-size:   contain;
        background-repeat: no-repeat;    
        opacity: 0.33;
        }

#matchgame .score.lose     { background-image: url("/content/gui/toothstar/0.png"); opacity: 1 }
#matchgame .score.halfwin  { background-image: url("/content/gui/toothstar/1.png"); opacity: 1  }
#matchgame .score.win      { background-image: url("/content/gui/toothstar/2.png"); opacity: 1  }                                       
#matchgame .score.active   {                                                        opacity: 0.8; }                                       
         

#matchgame svg {
        width: 12dvmin;  
        height: 12dvmin; 
        transition: all .7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        fill:rgb(94, 68, 0); 
        stroke:rgb(136, 136, 136) ;
        stroke-width: 0.5dvmin; 
        }
        
#matchgame svg.lose {
        transform: scale(0.8 );
        fill:rgb(75, 0, 0); 
        stroke:rgb(0, 0, 0) ;
        stroke-width: 1dvmin; 
        text-shadow: 0 0 1dvmin white;
        }
                        
#matchgame svg.win  {
        transform: scale( 1.2 );
        fill:rgb(255, 208, 88); 
        stroke:rgb(255, 255, 255) ;
        stroke-width: .5dvmin; 
        }
                            
#matchgame svg.halfwin  {
        transform: scale( 1.2 );
        fill:rgb(149, 116, 32); 
        stroke:rgb(255, 235, 14) ;
        stroke-width: .175dvmin; 
        }
                                    
                                                      
#matchgame svg.active  {
        background: #0005;
        border-radius: 1em;
        border: 1dvmin  solid black;
        }
                    
                        
#matchgame > * {
        text-align: center;
        padding: 1dvh 0;
        /* background-color:#0000007d;  color:rgb(0, 225, 255);
        border-radius: 3dvw;
        border: .5dvmin inset rgb(0, 169, 199);   */
        }
#matchgame h1 {
        font-size: 8dvh; 
        font-weight: 800; 
        color:gold; 
        text-shadow: 2dvmin 2dvmin 1dvmin black, -.2dvmin -.2dvmin .9dvmin white;
        }

#matchgame .choices,
#matchgame .challenge { 
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;        }



#matchgame .choices > *,
#matchgame .challenge > * {
        width: 30dvw; 
        /* height: 25dvh;*/
        margin: 1dvh 0;
        background-size: cover;        
        background-color:#0000007d;
        color:rgb(0, 225, 255);
        border-radius: 5dvmin;
        border: 1dvmin inset rgb(2, 128, 253);
        }

#matchgame .choices > *.w,
#matchgame .choices > *:hover {
        transform: scale(1.1);
        border-color:#f8ff717d;
        filter: brightness(1.2);
        box-shadow: 0 0 1dvmin .5dvmin rgb(255, 255, 255);
}


#matchgame .choices > *.g,
#matchgame .choices > *.g:hover  {
        transform: scale(  1);
        filter: grayscale( 60% ) ;
        border-color: rgb(145, 139, 139);
        box-shadow: none;
}
        
 

#matchgame .choices > *.l,
#matchgame .choices > *.l:hover  {
        transform: scale( .9);
        filter: grayscale( 60% )  brightness(35%);
        border-color: rgb(94, 86, 86);
        box-shadow: none;
}
        
 


#matchgame .test canvas {
        width: 30%;
        height: 21%;
        border-radius: 2dvmin;
        border: 2px solid gold;
        margin: 0.5dvmin;        
}
                                                

/**********************************************************************************************/
/***                                    SHOPPING                                            ***/
/**********************************************************************************************/


        


/**********************************************************************************************/
/***                                 DEVELOPMENT TOOLS                                      ***/
/**********************************************************************************************/




#help {        position:absolute; top   :10dvh; left  :20dvw; z-Index:11;  width :60dvw;
        background-Color:#FFFFAABB;  color:black;
        font-Family:monospace;  padding:0.5em; margin :0.5em;
        /* overflow-y:auto;white-space:pre; */
     }
#help li                { list-style-type: none; margin-top:1dvh; padding: 0 0 0 0; border: thin dotted black; overflow:hidden;}
#help li:nth-child(1)   { background-color:rgba(255,255,255,0.2);  }
#help li:nth-child(2)   { background-color:rgba(255,255,255,0.4);  }
#help li span.key       { padding: .4dvh; margin: 2px; background-color:#0d813c;color: gold; border: thin solid black; font-weight: 800; font-size: 1.5em; }
#help li span.hint      {  background-color:rgb(249, 247, 115); padding: .3dvh; margin: 2px; color: #e67519 ; border: thin solid black; font-weight: 400; font-size: 1.3em; }
     
#scrub  { 
        position: absolute;  z-index:8; 
        margin: 0; padding: 10px; 
        color: rgb(0, 0, 0);	border-radius:15px; border: 3px solid black; background-color: rgb(229, 252, 114);
        font-size:32px; font-weight: 800;font-family: 'Courier New', Courier, monospace;}


        
#shadereditor {
        position:absolute; top:5dvh; left:5dvw; width:90dvw; height:90dvh; z-index:1000; 
         
        background-color:#430606; color:#9FF; 
        font-size:1.6em; font-family:monospace; white-space:pre;
        overflow:hidden; padding:0.5em; box-sizing:border-box; resize:both; border:1px solid gold;             }
#shadereditor button {
        background-color:#A33; color:white; border:1px solid gold; font-size:1.3em; float:right;
        margin:0.1em; padding:0.1em; box-sizing:border-box; cursor:pointer; }

#timelinemonitor {
        position:absolute;
        top   :10dvh;     
        left  :20dvw;
        z-Index:10;
        width :60dvw;
        background-Color:#AAAAFF10;
        color:white;
        font-Size:1.5em;
        text-Align:center;
        font-Family:monospace;
        padding:0.5em;
        margin :0.5em;
        overflow:scroll;
        overflow: hidden;
}
#timelinemonitor p {    padding:0;margin:0;}

#timelinemonitor li { display:flex; flex-direction:row; justify-content:space-between; }
#timelinemonitor div#edit { display:flex; flex-direction:row; justify-content:space-between; }
#timelinemonitor button  { border-radius: 14px; color:gold; background-color:rgba(0,0,64,0.5); border:thin solid gold; padding: 0 4px 0 4px; margin: 0 4px 0 0; }
#timelinemonitor button:hover { background-color:rgba(0, 0, 27, 0.8); color:rgb(255, 243, 177); }
#timelinemonitor #scrubtime  { border-radius: 4px; background-color:gold; color:rgba(0,0,64,0.5);  padding: 0 4px 0 4px; margin: 0 4px 0 0; }

#timelinemonitor li div { width:10dvw; text-align:right; border: thin dotted grey; } 
#timelinemonitor li:nth-child(1) { background-color:rgba(255,255,255,0.2); }
#timelinemonitor li:nth-child(2) { background-color:rgba(255,255,255,0.1); }
#timelinemonitor span.key { margin: 0 10px 0 0; background-color:rgba(255,55,55,0.1); color:grey }
#timelinemonitor span.value { margin: 0 4px 0 0; background-color:rgba(2, 18, 6, 0.477); color:rgb(138, 174, 61) }
#timelinemonitor .new span.value { margin: 0 4px 0 0; background-color:rgba(0, 0, 0, 0.68); color:rgb(179, 223, 83) }
#timelinemonitor span.value.time:hover { margin: 0 4px 0 0; background-color:rgba(93, 253, 71, 0.77); color:rgb(12, 2, 35); border: thin solid gold; }
#timelinemonitor span.value.time:focus { margin: 0 4px 0 0; background-color:rgb(93, 253, 71); color:rgb(12, 2, 35); border: thin solid white; }

.icon:hover { transition: border-color 2s; border-color:rgb(133, 225, 255) !important; }








/* 
.orientation-popup {
        position: absolute; top: 0; left: 0; width: 100dvw; height: 100dvh; 
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        justify-content: center;
        pointer-events: none;
        }
.orientation-popup > * {
        pointer-events: all;
        position: relative;
        left: 2dvw;
        top: 1dvh;
        transform: translate(-50%, -50%) rotate(-90deg);
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 5dvh 5dvw;
        background-color: rgba(0, 0, 0, 0.8);
        font-size: 2em;
        font-weight: 500;
        border: thin solid rgb(251, 242, 192);
        color: rgb(251, 242, 192);
        text-align: center;
        border-radius: 10px;
        flex-direction: column;
    }
    
    
 */




#orientation-popup {
        /* transform: scale(0.588)  rotate(-90deg)  translateX(130%); */
        position: absolute;
        top: 0%;
        left: 0%;
        min-width: 100dvw;
        min-height: 100dvh;
        max-width: 100dvw;
        max-height: 100dvh;
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-template-rows:    1fr 3fr;
        pointer-events: none;
        background-color: #aaaaaa80;
        z-index: 9;
        }
#orientation-popup .symbol {
        background-image: url("/content/gui/reorient.png");
        background-size:contain; 
        background-repeat: no-repeat;      
        width:  90dvmin;
        height: 90dvmin;
        transform: scaleX( -1 );
        grid-column: 2;
        grid-row: 2;
    }

 #orientation-popup .hint    {
            text-align: center;
            grid-column: 2;
            grid-row: 3;
            font-size: 6em;
            font-weight: 900;
            text-shadow:  1.5dvmin 1.5dvmin 1dvmin black, -.3dvmin -.3dvmin .25dvmin rgba(244, 188, 5, 0.514);
            color:rgb(255, 255, 255);
            line-height: normal;
            padding: 0 1dvw 4dvh 1dvw;
            background-color: #00000020; 
        }
        
#orientation-popup .hint .sub       {              font-size: .77em;            }
            
            
 
 
 

/* @media (max-width: 1024px) { .orientation-popup { top: -4%;                    } }
@media (max-width:  768px) { .orientation-popup { top: -8%; font-size: 1.5em;  } }
@media (max-width:  480px) { .orientation-popup { top: 15%; font-size: 1.2em;  } }
@media (max-width:  350px) { .orientation-popup { top: 20%; font-size: 1.2em;  } }   */