@import "./theme.css";




.phone-container
{
    position: relative;
    width: 80%;
    height: 100%;
    padding: clamp(0.01rem, 1vw,20rem) clamp(0.01rem, 1vw,20rem); 
    display: inline-flex ;
    justify-content: center;
    cursor: none;
    pointer-events: all;
    


  
}

.phone-transform
{
    rotate: 0 0 1 -5deg; 
}


.phone-hover
{
    position: absolute;
    z-index: 30;
    cursor: none;
    pointer-events: all;
    display: flex;  
    height: 100%;
    width: 45%;
   
}


.phone-back
{
    position: absolute;
    z-index: 30;
    cursor: none;
    pointer-events: all;
    transform: translate(calc(clamp(0.2rem, 1.35vw, 20rem) * -1), 0);
    height: 65%;
    transition: 150ms cubic-bezier(0, 0, 0.58, 1),  150ms cubic-bezier(0, 0, 0.58, 1);
 
}

.phone-hover:hover .phone-back
{   
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), 150ms cubic-bezier(0, 0, 0.58, 1);
    transform: translate(calc(clamp(0.2rem, 1.35vw, 20rem) * -1), calc(clamp(0.2rem, 12vw, 20rem)));
}


.phone-front
{
    position: absolute;
    z-index: 50;
    pointer-events: none;
    
    height: 65%;
}


/** POP UP display Stufff **/




#phone-popUp
{  


    
    position: fixed;
    margin: auto;

   
    background: var(--phone-gradient-screen);
    border-radius: calc(01 * var(--inputfield_text_size));
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    cursor: pointer;
    align-content: space-between;
    z-index: 100;
    animation: slideIn 0.6s ease;

   

    width: 45vw; /* 45% of viewport width */
    height: 50vw; /* ratio = 50/45 * 45 = 50 */
    max-height: 90vh;
    max-width: 81vh; /* 45/50 * 90 = 81 */






    --inputfield_text_size: 20;
    --gap_size: 20;
   
  
}


dialog
{
    padding: calc(0.2 * var(--inputfield_text_size));
}

body:has(#phone-popUp[open]) 
{
    /* Poof! No more scrolling! */
    overflow: hidden;
}


#phone-popUp::backdrop
{
    animation: fadeIn 1s ease both;
	background: rgba(30, 5, 5, 0.32);
	z-index: 2;
	backdrop-filter: blur(20px);
}



.hidden {
    display: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


@keyframes slideIn {
    0% {
      transform: translate(0, 50%);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  
  .phone-display-container
  {
    
    width: 100%;
    height: 100%; 
    justify-content: center;
    align-items: center;
  
  }
  
  .phone-display-container.phone
  {
    flex-direction: column;
    pointer-events: all;
    
    form
    {
        margin-block-end: 0;
        
    }

  }
  


.display-container
{ 
    position: relative;
    display: flex;
 
  

}

.display-container.top
{
    /* padding: clamp(0.01rem, 1.8vw,20rem) clamp(0.01rem, 2vw,20rem);
    flex-direction: row;
    justify-content: space-between;
    display: flex; */

    padding: calc(0.5* var(--inputfield_text_size)) calc(0.5* var(--inputfield_text_size));
    flex-direction: row;
    justify-content: space-between;
    display: flex;
}

.display-container.main
{
    /* padding: clamp(0.01rem, 0.4vw,20rem) clamp(0.01rem, 1vw,20rem);
    gap: 0.5vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex; */
   
    padding: calc(0.1 * var(--inputfield_text_size)) calc(1.5 * var(--inputfield_text_size));
    gap: 0.5%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
}

.display-container.bot
{
    /* display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: clamp(0.01rem, 0.4vw,20rem) clamp(0.01rem, 2vw,20rem); */

    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: calc(0.5* var(--inputfield_text_size)) calc(0.5* var(--inputfield_text_size));
 

}

.icon
{
    display: flex;
    width: 10%;
   
}

.icon.battery
{
    width: 15%;
}


.inputLabel
{
    padding: 0 calc(0.4 * var(--inputfield_text_size));;
    
}

.phone-textfield
{
    /* padding: clamp(0.01rem, 1.0vw,20rem) 0;
    border-radius:  clamp(0.01rem, 1vw, 20rem);
    border: clamp(0.01rem, 0.2vw, 20rem) solid  #d9d9d9;;
    background: var(--phone-gradient-ui);
    position: relative;
    display: flex;
    font-family: 'Jersey15' , sans-serif;
    font-size: clamp(0.02rem, 2.5vw,20rem);
    flex-direction: row;
    width: 100%; */

    border-radius:  calc(0.4 * var(--inputfield_text_size));
    border: calc(0.1 * var(--inputfield_text_size)) solid  #d9d9d9;;
    background: var(--phone-gradient-ui);
    position: relative;
    display: flex;
    font-family: 'Jersey15' , sans-serif;
   
    font-size: var(--inputfield_text_size);
    flex-direction: row;
    width: 100%;

    padding: calc(0.5 * var(--inputfield_text_size)) 0;
    
}

.phone-textfield input {
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Jersey15', sans-serif;
    font-size: var(--inputfield_text_size);
    flex-direction: row;
    outline: none; 
    background-color: transparent;
    position: relative;
    display: block;
}

.phone-textfield.multiline textarea {
   
    padding: 0 calc(0.5 * var(--inputfield_text_size));
    height: calc(8.0 * var(--inputfield_text_size));
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Jersey15', sans-serif;
    font-size: var(--inputfield_text_size);
    outline: none;
    background-color: transparent;
    position: relative;
    display: block;
    resize: none;
}

.phone-textfield {
    transition: border-color 0.3s ease; 
}

.phone-textfield.focused {
    border-color: #0a66c2;
}

.phone-textfield.multiline
{
    padding-bottom: calc(1 * var(--inputfield_text_size));
    flex-direction: column;
}

/*Work around for the autofill changing the back-ground color*/
.phone-textfield input:-webkit-autofill,
.phone-textfield input:-webkit-autofill:hover,
.phone-textfield input:-webkit-autofill:focus,
.phone-textfield input:-webkit-autofill:active {
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: inherit !important;
    -webkit-background-clip: text;
}


.validator
{
    /* font-family: 'Jersey15', sans-serif;
    font-size: clamp(0.02rem, 1.2vw, 20rem);
    margin-left: 2%;
    text-shadow: 0.1vw 0.1vw 0.2vw #0d0101; */

    font-family: 'Jersey15', sans-serif;
    font-size: 
    calc(0.7 * var(--inputfield_text_size));
    margin-left: 2%;
    text-shadow: 0.1vw 0.1vw 0.2vw #0d0101;

    padding-top: calc(0.08* var(--inputfield_text_size));
    padding-bottom: calc(0.15* var(--inputfield_text_size));
    
}





.phone-button
{
    border: none;
    background: transparent;

    font-family: 'Jersey15', sans-serif;

    font-size: calc(2 * var(--inputfield_text_size));
    justify-content: center;
    align-content: center;

    
}

.phone-button:hover
{
    color: var(--color-textPrimary);
}

.phone-button.send
{
    font-size: calc(3 * var(--inputfield_text_size));
}


/*========================== SNAKE STUFF ======================================*/

.canvaswrapper
{
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas
{
    
    position: relative;
    display: flex;
    z-index: 400;

    padding-top: calc(0.3 * var(--inputfield_text_size));
    padding-bottom: calc(0.1 * var(--inputfield_text_size));
}

#game-canvas
{
    display: flex;
}

.game-score
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Jersey15', sans-serif;
    font-size: calc(1 * var(--inputfield_text_size));
    line-height: 0%;

   .count
    {
        font-size: calc(1.5 * var(--inputfield_text_size));
       
    }
  
}



.toast {
    visibility: hidden;
    min-width: 250px; 
    margin-left: -125px;
    background-color: #333;
    color: #fff; 
    text-align: center;
    border-radius: 2px; 
    padding: 16px; 
    position: fixed; 
    z-index: 1000; 
    bottom: 30px; 
    left: 50%; 
    font-size: 17px;
}

/* Show the toast when it's triggered */
.toast.show {
    visibility: visible; 
    animation: fadeInOut 3s ease-in-out;
}

/* Animation to fade out the toast after a few seconds */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        bottom: 30px;
    }
    25% {
        opacity: 1;
        bottom: 30px;
    }
    75% {
        opacity: 1;
        bottom: 30px;
    }
    100% {
        opacity: 0;
        bottom: 0px;
    }
}