*, *::before,*::after {
    /* box-sizing: border-box;*/
    font-family: Gotham Rounded /*,*/, sans-serif;
    font-weight: normal;
    
  }

  
  body {
    padding: 0;
    margin: 0;
    background-color: hsl(0, 0%, 100%); 
    display: flex;   
    flex-direction: column;
  
    font-size: clamp(1rem, 3vmin, 5rem); 
    min-height: 100vh;  
    
  }

 

  .gameContainer {
    display:flex;
    box-sizing: border-box;
    padding:18px;
    flex-direction:column; 
    max-width:495px;  
    min-height:520px;
    height: 100dvh;  
    width:100%;
    
    user-select: none;
    align-items: center;
    align-self:center;
 
  }  

  #title-bar {

    display: flex;
   
    white-space:nowrap;
    justify-content: space-between; 
    align-self: center;
    
    padding: 4.5px 4.5px 7.5px 4.5px;
    border-bottom:1px solid rgb(38, 106, 216);
    margin-bottom:18px;
    margin-top:9px;
    text-align: center;
    width:80%;  
    
    
  }
  #title {
     display:flex;
     
     justify-content:center;
     font-weight: 720;
     font-size: 1.2em;
     letter-spacing: 0.1rem;
     text-transform: uppercase; 
     cursor:pointer;
     width:288px; 
     height:40px;  
     position:relative;
     flex-wrap: wrap;
     color:rgb(38, 106, 216);
     
    }
    .tm-symbol {
      font-size:x-small;
      vertical-align: baseline;
      margin-left: 0.1em; 
    }
    .strapline{
      letter-spacing:normal;
      font-weight:500;
      text-transform:none;
      font-size:.4em;
      font-style:oblique;
    }

button.icon {
  background: none;
   border: none;
   cursor: pointer;
   padding: 0 4.5px;
   margin-bottom:0;
   position:relative;
   
   
   
}

.copyright{
  font-size:xx-small;
  color:rgb(38, 106, 216);
  margin-top:0%;
}

  .color{
    position:relative;
    font-size: inherit;
    top: 25px;

    
    padding-left: 1px;
    
    }

    .color.round1 {
      position: relative;
      background-color:hsl(0, 0%, 100%);
    
    border-color:  hsl(0, 0%, 60%);
    width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    left:26px;
 
     }
    
    .color.round2{
      position: relative;
      left:28px;
      background-color:hsl(0, 0%, 100%);
     /* left: 158px;*/
      border-color: rgb(112, 148, 240);
      width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    }
    .color.round3{
      position: relative;
      background-color: hsl(0, 0%, 100%);
      border-color: rgb(216, 211, 56);
   
      width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    left:30px;

    }

    .calculator-grid {
      
      font-size: inherit;
      display: grid;
      align-self: center;
      grid-template-columns: repeat(3,1fr); 
      grid-template-rows: repeat(3,1fr); 
      gap: 0.3em; 
      margin: 0;
      padding: 0;
    
      width: 72%;
      aspect-ratio: 18/18;
      align-self: center;
    
  }


  .key{
    position: relative;
    border: 0.1em solid rgb(0, 0, 255);
    padding: 0;
    font-weight:405;
    justify-content: center;
    align-items: center;

    background-color: hsl(
      var(--hue,200),
      var(--saturation, 1%),
      calc(var(--lightness-offset,0%) + var(--lightness,75%))
    );
   
    color: rgb(255, 254, 254);
    text-transform: uppercase;
    border-radius: .25em;
    cursor: pointer;
    user-select: none;

    
  }
 

  .key.number {
    
    border:0.08em solid blue;
    color: blue;
    
     background-color: grey; 
     background-image: linear-gradient(rgb(110, 191, 248),rgb(206, 224, 248));
    
    grid-column: span 1;
    grid-row: span 1;
    font-size:1.8em;
    font-weight:525;
    min-width:90%;
    min-height:100%;
    margin: auto;
  
    
  }



 
  .key.number::after {
    content:'';
    position:absolute;
    top: 2px;
    left: 2px;
    width:95%; 
    height: 45%;
    background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.25));
    opacity: 1;
    z-index: 0;

  }
 
  .key[data-state="inactive"] {
    background-image:linear-gradient(rgb(73, 157, 253),rgb(66, 128, 253));
    border: 0.1em solid blue;
    opacity: 0.9;


  }
  
  
  
  .key.equalsTotal{
    text-transform:none;
    padding:0;
    grid-column: span 1;
    grid-row: span 1;
    transition: color 1s ease, border 1s ease, box-shadow 1s ease;
    color:green;
    border: 0.2em solid green;
    background-color: rgb(250, 251, 252);
    box-shadow: 0 0 4px rgb(124, 248, 175),0 0 4px rgb(159, 159, 159);
    min-height:75%;
    max-height:75%;
    min-width:95%;
    margin-left: auto;
    margin-right:auto;
    margin-top: auto;
    margin-bottom:auto;
    border-radius: 5%;



  }   

    
    


  
  
  .equalsText{
    font-size:2.2em;
    font-weight:bold;
  }
  .key.equalsTotal.dance{
    animation:dance 500ms ease-in-out;
  }

  .key.equalsTotal.shake-rotate {
    animation: shakeRotate 500ms ease-in-out;
  }
  .key.equalsTotal.shake-rotateY {
    animation: shakeRotateY 750ms ease-in-out;
  }

  @keyframes shake {
    10% {
      transform:translateX(-5%);
    }
    30% {
      transform: translateX(5%);
    }
    50% {
      transform: translateX(-7.5%);
    }
    70% {
      transform: translateX(7.5%);
    }
    90% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes dance{
    20%{
      transform: translateY(-25%);    
    }
    40%{
      transform: translateY(3%);    
    }
    60%{
      transform: translateY(-15%);    
    }
    80%{
      transform: translateY(2%);    
    }
    90%{
      transform: translateY(-5%);    
    }
    100%{
      transform: translateY(0);    
    }
    
  }
  @keyframes shakeRotate {

    15% {
      transform: rotate(-22deg);
    }

    40% {
      transform: rotate(22deg);
    }

    55% {
      transform: rotate(-10deg);
    }
    65% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(10deg);
    }
    90% {
      transform: rotate(-5deg);
    }
    97% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
    
  }

  @keyframes shakeRotateY {

    15% {
      transform: rotateY(-42deg);
    }

    40% {
      transform: rotateY(42deg);
    }

    55% {
      transform: rotateY(-20deg);
    }
    65% {
      transform: rotateY(0deg);
    }
    75% {
      transform: rotateY(20deg);
    }
    90% {
      transform: rotateY(-10deg);
    }
    97% {
      transform: rotateY(5deg);
    }
    100% {
      transform: rotateY(0deg);
    }
    
  }

 

  .deleteText{
    
    font-size:xx-small;
  }
  
  .key.operator {
  
    font-size:1.5em;
    grid-column: span 1;
    grid-row: span 1;
    background-color: white;
    font-weight:600;
    width:63%;
    height:63%;
    margin: auto;
    
  }

  .key.operator.times {
    color: blue;
    border-color: blue;

  }

  .key.operator.plus{
color: blue;
border-color: blue;

  }
.key.operator.minus{
  color: blue;
  border-color: blue;

}


  .key.cnum{
   
   
      grid-column: span 1;
      grid-row: span 1;
      color: white;
      background-color: rgb(38, 106, 216);
      border: 0.05em solid rgb(0, 0, 255);
      border-radius: 5%;
      
    
    
  }

  .key.cnum.larger{
    
    font-size: 220%;
    
  }

  
  .key.cnum.smaller{
    font-size: 75%;
    
  }
  

    
        .key:hover, .key:focus {
          
          --lightness-offset: 10%;
          
        }

        .key.number.used{
          --lightness: 33%;
        }

  .guess-grid {
    display:grid;

    justify-content: center; 
    align-content: center;
    flex-grow: 1;
  
    grid-auto-flow: column;  
    grid-template-rows: repeat(1, 4em);
    
    margin-bottom:5em;  

  }

  
  .tile{
    font-size: 3em; 
      
    color: rgb(38, 106, 216);
    
    border:0.05em solid white; 
    border-radius: 5%; 
    
  
    background-color: hsl(0, 0%, 100%);   
    text-transform: uppercase;
    font-weight: bold;
    display: flex;

    user-select: none;
    gap: 0.01em;  
    

    transition: transform 250ms linear;
    
  }
 
  
  div.guess-grid.hide > * {
    gap: 0;
    padding:0;
    width:0;
    display:none;
 }
  
  .tile.number{

  padding:0.1em; 
  

    
  }

  .tile.operator{
 
    padding:0.1em;
    
  }
  .tile.shake{
    animation:shake 250ms ease-in-out;
  }
  .tile.dance{
    animation:dance 500ms ease-in-out;
  }
  @keyframes shake {
    10% {
      transform:translateX(-5%);
    }
    30% {
      transform: translateX(5%);
    }
    50% {
      transform: translateX(-7.5%);
    }
    70% {
      transform: translateX(7.5%);
    }
    90% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes dance{
    20%{
      transform: translateY(-25%);    
    }
    40%{
      transform: translateY(3%);    
    }
    60%{
      transform: translateY(-15%);    
    }
    80%{
      transform: translateY(2%);    
    }
    90%{
      transform: translateY(-5%);    
    }
    100%{
      transform: translateY(0);    
    }
    
  }
  .tile.flip{
transform: rotateX(90deg);

  }

  .tile.game1{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }


  .tile.game2{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }

  .tile.game3{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }



     
@media only screen and (min-device-width: 375px) and(max-device-width: 430px) and (min-device-height: 715px) and (max-device-height: 932px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 82%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 9em;  
  }

}
    
@media only screen and (min-device-width: 360px) and (min-device-height: 720px)and (max-device-height: 780px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 82%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 7em;  
  }

}


@media only screen and (min-device-width: 360px) and (max-device-height: 667px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 72%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 7em;  
  }

}


@media (max-width: 321px) {
  .gameContainer{
    height: 90vh;
  }
 .calculator-grid {
    width: 80%;
    height: 42%;
  }  
  .guess-grid {
    margin-bottom: 3em;  
  }
  #title {

    font-size: 1.1em;
    letter-spacing: 0.05rem;
    width:210px; 
     
   }
   .tm-symbol {
       margin-left: 0.05em; 
   }
   button.icon {
    padding: 0;
       
  }
}







 .timer-container {
  
  display: flex;
  flex-direction: row;

  align-self: start; 
    font-size: small;
  
    color: rgb(255, 255, 255); 
    padding-left:0px;
    padding-top: 2px;
    padding-bottom:0px;
    user-select: none;
    
    

      
  }
 
  
.alert-container{
  position: absolute;  
  z-index: 1000;
  background-color: white;
  max-width:495px;
  
  top: 30vh;
  z-index:1;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
   

}

@media (max-width: 480px) {
  .alert-container {
    max-width: 90%;
  }
}

.alert{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;  
  padding:.5em;
  border-radius: .25em;
  opacity:1;
  transition:opacity 500ms ease-in-out;
  margin-bottom: .5em;
  box-shadow: 0 4px 23px 0 rgb(0 0 0 / 35%);
  font-size:1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  
}
@media (max-width: 480px) {
  .alert {
    max-width: 95%;
  }
}

.alert:last-child{
margin-bottom: 0;

}

.alert.hide{
  opacity:0;
}


.buttons-container {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: right;
  gap: 1rem; 
}
  

.AlertButton{
  color: black;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    border-radius:8%;
    border: 1px solid black;
    height: 1.8em;
    background-color: white;
 
    
  
}


         .results_container{
          
          display:none;
          
        }
        h3{
          margin-bottom: 0.4em;
        }

        h5{
          margin-top:0.7em;
          margin-bottom: 0.1em;
        }

        .results_container.welcome{
          display:none;
          
           }

        
        .result_container.menu{
          display:none;
        }

       

        .results_container.information{
          display:none;
        }
        .results_container.settings{
          display:none;
        }


       


        .results_container{
          position:absolute; 
          background-color: rgb(242, 246, 250);
          width:90%;
          max-width:495px;
          height: 100%;  
          max-height: 95%;
          overflow-y: auto; 
          box-shadow: 0 4px 23px 0 rgb(0 0 0 / 35%);
          padding:5px 10px 10px 10px;
          border-radius: 8px;
          font-size: 14px;
                   
       
          top: 50%;
        
          left: 50%;  
         
          transform: translate(-50%,-50%); 
          user-select: none;
            
        }
.dictionary_style {
  font-size:medium;
  text-align: left;
  color: rgb(38, 106, 216);
  padding:40px 20px 80px 20px;
}
.bold_text {
font-weight: bold;

}

@media only screen and (max-device-width: 430px){
  .dictionary_style{
    font-size:.8em;
    padding:40px 20px 20px 20px
  }
}

        .header{
          font-size:1.8em;
          font-weight:500;
          padding-left:.63em;

        }
        .instructions{
          font-size:1.2em;
          padding-left:.63em;
           }

        .instructions.emphasise{
          font-size:1em;
          font-style:oblique;
          font-weight:450;
        }
        ul{
          padding-left:1.2em;
          padding-right:.51em;
        }
        li{
          
          margin-top:0.25em;
           font-size:1.2em;
          padding-left:.63em;

          }
        .custom-video{
        width:70%;
        height:50%;
        margin: 3em;
        border:0.02em solid black; 


        }
        

        .results_header{
          font-size:1.7em;
          display:flex;
          justify-content:space-between;
          align-items: center;
        }

        
@media (max-width: 321px) {

  .results_header{
    font-size:1.4em;
  }
  .instructions{
    font-size:1.0em;
  }
  li{
     font-size:1.0em;
  }
  .header{
    font-size:1.3em;
    font-weight:600;
    padding-left:.63em;

  }
}
      
        .scoring.information{
          background: transparent;
          border: 0;
          cursor:pointer;
          padding: none;
          

        }
        
        .results_close{
         

          background: transparent;
          border: 0;
          cursor:pointer;
          font-size:30px;
          color:#000;
          position:absolute;
          right:-1px;
          top:1px;
      
        }

       
        
      
        .results_content{
          position: absolute;
          top:7%;  
          background-color: rgb(242, 246, 250);

          display:grid;
          
           
          grid-template-columns:repeat(12,1fr);
          
          grid-template-rows: 1fr 0.5fr 1fr 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr 1fr;
          
          max-width:95%;
          max-height:95%;
          width:95%;
          overflow-y: auto;
          
          align-items:center;
          justify-content:center;
      
          font-size:100%;
          
          
       
                 
        }
        .boxes{
          font-size:75%;
         }
       
        @media (min-width: 490px) {
          .results_content {
            grid-template-rows: 1fr 1fr 1fr 1.5fr .75fr .75fr 1.5fr .75fr .75fr 1.5fr .75fr .75fr 1fr;
            font-size: 135%;
          }                
        }
        @media(max-width:430px){
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr;
          font-size:122%;
        }
        }

        @media(max-width:375px) and (max-height:629){ 
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr;
          font-size:100%;
        }
        }
        @media(max-width:374px){
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr;
          font-size:117%;
        }
        }

        @media(max-width:321px){
          .results_content{
          grid-template-rows: 1fr 0.75fr 0.9fr 0.9fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr 1fr 0.5fr 0.75fr 1fr;
          font-size:90%;
        }
        .charlies-number{
          font-size: 1.3em;
        }
        .points{
          font-size: 1.3em;
        }
        .your-solution{
          font-size: 1.3em;
        }
          .heading-row{
            font-size: 1.15em;
          }
          .result.Total {
            font-size:1.2em;
          }
         
         

        }
       
      

        .charlies-number-heading {
          grid-column: span 12;
          font-weight: 450;
          color:black;
          font-size:medium;
          text-align: center;
         }
       @media(min-width:375px){
       .charlies-number-heading{
       font-size:larger
       }
      }
      
       
        .results_content > div{
          background:rgb(242, 246, 250);
          text-align: center;
        
          
          }


          .results_content > button{
            
            height: 95%;
            width: 100%;
            font-size:63%;
            grid-column:span 2;
            grid-row: span 1;
            color: black;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
              border-radius:8%;
              border: 1px solid rgb(136, 136, 136);
              background-color: rgb(242,246,250);
              cursor: pointer;
            
          } 

          @media(min-width:375px){
            .results_content > button{
            font-size: size 69%;
          }
          
          } 
        
    
    .reveal.hide{
      opacity:0;
     
      }
     
     
     .samecolwidth{
       grid-column: span 2;
       
      
     }
    
     
     .your-solution {
       grid-column: span 5;
      
       
      }
     
     .space1{
       grid-column: span 1;
      
       
     }
    
     
     .space2{
       grid-column: span 2;
       
     }
     
     .space4{
       grid-column: span 4;
       
       
     }
     
     .spacefull{
       grid-column: span 12;
      
       
     }
  
     .result.Total{
       grid-column: span 4;
     
     }
     .points.total{
       grid-column: span 2;
     }
     .timeToNextCharliesNumber{
       grid-column: span 12;
     }

     .revealbuttonspace{
      grid-column: span 1;
     }

  .share {
    font-size: inherit;
    grid-column: span 1;
    grid-row: span 1;
    border-color: white;
    background-color: rgb(110, 191, 248);
    color: white;
    cursor:pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          
    }

.share_text{
display:inline-flex;
padding:2px 2px 2px 2px;
vertical-align:top;
}      

    .copyemoji{
      display: none;
    }
 
     footer {
      display:inherit;
      position:relative;
      top:80%;
      text-align:center;
      justify-content: center;
      font-size:medium;
      
      
      
     }

    

input[type="checkbox"].toggle{
opacity:0;
position:right;
left:-9000px;
top: -9000px;  
}
 input[type="checkbox"].toggle + label{
  position: relative;
  display:flex;
  align-items:center;
  cursor: pointer;
  
}

input[type="checkbox"].toggle+label::before{
  content:"";
  width: 3em;
  height: 1.5em;
  background-color:#b3b3b3;
  border-radius: 2em;
  margin-right:.25em;
  transition:200ms ease-in-out

} 
input[type="checkbox"].toggle+label::after{
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:0.75em;
  left:0.18em;
  content:"\2715";
  width: 1.8em;
  height: 1.8em;
  background-color:white;
  color:#b3b3b3;
  border-radius: 1em;
  transition:200ms ease-in-out
  
} 
input[type="checkbox"].toggle:checked+label::before{
  
  background-color:green;
 

} 


input[type="checkbox"].toggle:checked+label::after{
  content:"\2713";
  transform:translateX(100%);
  background-color:rgb(255, 255, 255);  
  color:green;
} 

input[type="checkbox"].toggle:disabled + label {
  color: #777;
}

input[type="checkbox"].toggle:disabled + label::before {
  background-color: #CCC;
}
input[type="checkbox"].toggle:disabled + label::after {
  background-color: #777;
}
input[type="checkbox"].toggle:disabled+label::after{
  
  color:#ccc;
} 
.spicy{
  font-size:1.2em;
}
