*{
  cursor: pointer;
}
body{
  margin:0 auto;
  background:url(https://lovemodz.com/blakesgame/Supermarket.jpg);
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
}
#intro h1{
  font-size:0pt;
  text-align: center;
  font-family: 'Fascinate inline';
  margin: 0px auto;
  color: blue;
  text-shadow: 0px 0px 6px rgb(0, 255, 234);
  animation: GameBlur 1.5s forwards  ease-in-out;
}
#intro.show{
display: block;
}
#intro{
  display: none;
  position: absolute;
  /*
  height:0%;width:0%;
  top:50%;left:50%;
  */
  /*height:50%;*/
  width:50%;
  top:15%;left:25%;
  margin:0 auto;
  padding: 15px 0px;
  text-align: center;
  background:rgba(255,255,255,1);
  border-radius:6px;
  border: solid 3px black;
  /*animation: GameBlur 3s 500ms forwards  ease-in-out;*/
}
#intro #title{
  height: 60px;
}
#intro button{
  position: relative;
  margin:10px auto;
  display: inline-block;
  background-color: rgb(0, 255, 234);
  color: blue;
  font-weight: bold;
  font-size: 14pt;
  padding:6px 30px;
  border:solid 1.5px blue;
  box-shadow: inset 0px 0px 18px 5px blue;
  border-radius: 4px;
opacity:0;
animation: GameBtn 1s 2s forwards  ease-in-out;
}
#intro p{
opacity:0;
animation: GameBtn 1s 2s forwards  ease-in-out;
}

#intro button:hover{
box-shadow: inset 0px 0px 18px 0px blue;
text-decoration: underline;
}
#intro button:after{
  content:attr(data-des);
position: absolute;
top:0%;
z-index:-1;
left: 0;
right: 0;
display: inline-block;
background-color: black;
  color: rgb(0, 255, 234);
  border: solid 1px rgb(0, 0, 0);
  border-top: 0;
  box-shadow: inset 0px -4px 4px rgb(0, 255, 234);
  border-radius: 0px 0px 4px 4px;
  padding:6px 0px;
font-size: 8pt;
opacity:0;
transition:opacity 200ms ease, top 800ms ease-in-out;
}
#intro button:hover:after{
top:100%;
opacity:1;
z-index:1;
transition:top 400ms ease-in-out, opacity 800ms ease-in-out;
}
@keyframes GameBlur{
  0% {font-size:26pt;}
  25%{font-size:16pt;}
	50%{font-size:26pt;}
  75%{font-size:16pt;}
  100% {font-size:26pt;}
}
@keyframes GameBtn{
  0% {opacity:0;}
  100% {opacity:1;}
}
#Game{
  display: none;
  text-align: center;
  position:absolute;
  padding-top:30px;
  height: calc(100% - 30px);
  width: 100%;
  background:rgba(0,0,0,.6);
}
#Game.show{
display:block;
}
#score{
  background:black;
  color:white;
  display: inline-block;
  padding:4px 10px;
  font-size: 12pt;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0px 0px 10px 0px;
}
#lives{
  background:#8c1b1b;
  display: inline-block;
  padding:4px 10px;
  box-shadow: inset 2px 0px 8px #ff0000;
  position: absolute;
  top: 5px;
  right: 0;
  border-radius: 10px 0px 0px 10px;
}

#lives i{
  color:#ff0000;
  text-shadow: -1px 0px 0px black, 1px 0px 0px black,0px -1px 0px black, 0px 1px 0px black;
  font-size: 12pt;
  opacity: 1;
  transition: all 800ms ease-in-out;
}

#lives i.die{
  /*transition: all 3s ease-in-out;*/
  font-size: 0pt;
  opacity: 0;
}
#home{
  background:rgb(0, 255, 234);
  color:black;
  display: inline-block;
  padding:8px;
  font-size: 14pt;
  position: absolute;
  top: 5px;
  /*left: 5px;*/
  left:calc(50% - 14px);
  border-radius:50%;
}
body:has(#intro.show) #home{
  display: none;
}
#Game .cont{
  margin:5px auto;
  display: inline-block;
  width:70%;
  padding:5px;
  background:white;
  border-radius: 2px;
}
/*
#Game .cont.show{
display: inline-block;
}
*/
    .money {
      margin: 0 2px;
        width: fit-content;
        height: fit-content;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: grab;
        user-select: none;
        touch-action: none;
        padding:6px;
    }
.money[data-value="0.01"]{
color:rgb(84, 61, 9);
  border:solid 1.4px rgb(84, 61, 9);
  background-color: rgb(165, 126, 42);
font-weight: bold;
border-radius: 50%;
font-size: 9pt;
    }
.money[data-value="0.02"]{
       font-size: 11pt;
       color:rgb(84, 61, 9);
  border:solid 1.4px rgb(84, 61, 9);
  background-color: rgb(165, 126, 42);
font-weight: bold;
border-radius: 50%;
    }
.money[data-value="0.05"]{
    font-size: 9pt;
color:rgb(110, 110, 110);
  border:solid 1.4px rgb(110, 110, 110);
  background-color: rgb(194, 194, 194);
font-weight: bold;
border-radius: 50%;
    }
.money[data-value="0.1"]{
     font-size: 10pt;
color:rgb(110, 110, 110);
  border:solid 1.4px rgb(110, 110, 110);
  background-color: rgb(194, 194, 194);
font-weight: bold;
border-radius: 50%;
padding:12px 10px;
    }
.money[data-value="0.2"]{
    font-size: 9pt;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  color:rgb(110, 110, 110);
  background-color: rgb(194, 194, 194);
  border-radius: 0;
    }
.money[data-value="0.5"]{
    font-size: 13pt;
    padding:10px 12px;
aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
  color:rgb(110, 110, 110);
  background-color: rgb(194, 194, 194);
  border-radius: 0;
    }
.money[data-value="1"]{
font-size: 10pt;  
padding:6px;
color:rgb(147, 125, 1);
  border:solid 6px rgb(231, 196, 1);
  background-color: rgb(194, 194, 194);
font-weight: bold;
border-radius: 50%;
    }
.money[data-value="2"]{
font-size: 14pt;
  padding:6px;
color:rgb(147, 125, 1);
  border:solid 8px rgb(231, 196, 1);
  background-color: rgb(194, 194, 194);
font-weight: bold;
border-radius: 50%;
    }
.money[data-value="5"]{
color:#1b8c22;
  border:solid 1.4px #1b8c22;
  background-color:#3ef04a;
font-weight: bold;
  font-size: 12pt;
  height:35px;
  width:60px;
  border-radius: 0;
  padding:0;
    }
.money[data-value="10"]{
color:#1b8c22;
  border:solid 1.4px #1b8c22;
  background-color:#3ef04a;
font-weight: bold;
  font-size: 12pt;
  height:35px;
  width:60px;
  border-radius: 0;
  padding:0;
    }
.money[data-value="20"]{
color:#1b8c22;
  border:solid 1.4px #1b8c22;
  background-color:#3ef04a;
font-weight: bold;
  font-size: 12pt;
  height:35px;
  width:60px;
  border-radius: 0;
  padding:0;
    }    
.items{
  position: relative;
  bottom:40px;
  height:42px;
  display: inline-block;
}
.items .Icon{
  display: inline-block;
      height:50px;
      width:38px;
  background:url(https://as1.ftcdn.net/v2/jpg/18/70/17/36/1000_F_1870173664_EtfXqZm9cJqP5jcJqUU5dkS9qXf54syb.jpg);
  background-position: -538px -14px;
  margin:0 8px;
    }
.items .Icon.two{
background-position: -584px -14px;
}
.items .Icon.three{
background-position: -774px -14px;
}    
.cabinet {
  margin:10px auto;
  position: relative;
  width: 260px;
  background-color: #45221c;
  border: 10px solid #69342b;
  box-sizing: border-box;
}
.cabinet .cabinet-top {
  width: calc(100% + 20px);
  height: 0;
  border-bottom: 10px solid #572b23;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  box-sizing: border-box;
  top: -20px;
  left: -10px;
  position: absolute;
}
.cabinet .shelf {
  position: relative;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
}

.cabinet .shelf .back {
  position: absolute;
  top: 0;
  left: 2%;
  width: 96%;
  height: 100%;
  background: #2c1512;
  box-shadow: inset 10px 15px 15px #21100d;
}
.cabinet .shelf .base {
  width: 100%;
  height: 0;
  border-bottom: 20px solid #331915;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  box-sizing: border-box;
  bottom: 10px;
  position: absolute;
}
.cabinet .shelf .front {
  width: 100%;
  height: 10px;
  background-color: #69342b;
  position: absolute;
  bottom: 0;
}
#question {
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: bold;
    }
#answerBox {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        margin: 10px auto;
        padding: 10px;
        background: white;
        border: 2px dashed #aaa;
        border-radius: 10px;
        width: 80%;
        min-height: 50px;
    }
#answerBox .money{
  margin-left:-15px;
  rotate: -25deg;
}    
#answerBox:after{
  content: "Drag & Drop Here";
  margin: 0 auto;
  position: absolute;
  color: #aaa;
  user-select: none;
}
#answerBox:has(div):after{
opacity: 0;
}

    #finishBtn, #tryAgainBtn, #nextBtn {
        display: none;
        margin-top: 5px;
        padding: 12px 25px;
        font-size: 18px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }

    #finishBtn { background: #0078ff; color: white; }
    #tryAgainBtn { background: #ff4444; color: white; }
    #nextBtn { background: #28a745; color: white; }
/*----------------------------------------------------------------------*/
#C4UNF{ position:fixed; 
top:0;
width: 100%;
display:block; 
text-align: center;
z-index:9999;}
#C4UNF .alert{ 
    cursor: pointer;
    font-size: 13pt;
    width: fit-content;
    padding: 4px 12px;
    margin-right: 20px;
    display: block;
    background-color: #f44336;
    color: #073c4a;
    opacity: 1;
    transition: opacity .6s;
    border-radius: 6px;
    margin:10px auto;
    box-shadow: inset 0px 0px 10px 3px black;
    border: solid 2px rgba(0, 0, 0, .4);
    animation-name: C4UAni;
    animation-duration: 8s;
} 
#C4UNF .alert.success {background-color: #04AA6D;}
#C4UNF .alert.info {background-color: #2196F3;} 
#C4UNF .alert.warning {background-color: #ff9800;} 
#C4UNF .C4UCBTN {  
  display:inline-block; 
  color: white; font-weight: bold; 
  font-size: 18px; 
  cursor: pointer; transition: 0.3s; background:rgba(0,0,0,.3); 
  border-radius: 6px;
  /*
  padding:2px 3px;
  margin-top:4px;*/ 
  opacity: .5; 
  } 
#C4UNF .C4UCBTN:hover { opacity: 1; background:rgba(0,0,0,.6); }
 @keyframes C4UAni { 
  0% {transform:translate(0%, -100%) scale(0);} 
  10% {transform:translate(0%, 0) scale(1);} 
  95% {transform:translate(0%, 0) scale(1);} 
  100% {transform:translate(0%, 0) scale(1);} 
  }    
#volume{
  position: fixed;
  top:50%;
  left:10px;
  display: inline-block;
  font-size:9pt;
  opacity: .4;
}
#volume:hover{
  opacity: 1;
  font-size: 14pt;
}
#volume i{
  position: absolute;
  display: block;
  top: 0px;
  padding: 10px;
  color: white;
  background-color: black;
  border-radius: 10px;
}
#volume i:nth-child(2){
  display: none;
}
#volume.on i:nth-child(2){
  display: block;
}