@font-face {
  font-family: Futura;
  src: url("assets/FUTURAMEDIUM.TTF");
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  background: #181816;
  font-family: "futura-pt", sans-serif;
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

h3,
h1,
p,
a {
  font-family: Futura;
  font-weight: 200;
}
body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.outer {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.outer .inner {
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.outer .inner .box {
  margin: auto;
  position: relative;
  overflow: visible;
}

.outer .inner .blob {
  position: absolute;
  background: url(assets/blob.png) center center no-repeat;
  background-size: cover;
  left: 61.5925925926%;
  top: 62.6068376068%;
  height: 34.6153846154%;
  width: 18%;
  pointer-events: none;
  -webkit-animation-duration: 12s;
  animation-duration: 12s;
  -webkit-animation-name: blobanim;
  animation-name: blobanim;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
  z-index: 99;
}

@-webkit-keyframes blobanim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes blobanim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.landscape.touch .outer .inner .blob {
  display: none;
}

@media screen and (max-height:  460px) {
  .outer .inner .blob {
    display: none;
  }
}

.please-rotate {
  background: #181816;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}
.please-rotate-inner {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.please-rotate-inner p {
  color: #f2c889;
  margin: auto;
}

.touch.portrait .please-rotate {
  opacity: 1;
}

.legals {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  text-align: center;
  text-transform: uppercase;
  color: #dedbe1;
  font-size: 10px;
}
.legals a {
  color: #dedbe1;
  text-decoration: none;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
}
.legals a:hover {
  color: white;
}

.landscape.touch .legals {
  font-size: 8px;
  padding: 0 0 .25rem;
}

.preloader {
  background: #181816;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  z-index: 100;
}

.box {
  margin: auto;
  position: relative;
  overflow: visible;
}

.test-game {
  width: 100%;
  height: 100%;
  background-color: red;
}
canvas {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

#frame {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.helix {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  height: 80%;
}
.knobs {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  width: 100%;
}

#squiggle-wrap {
  position: absolute;
  bottom: 10%;
  right: 5%;
  transform: scale(1);
  width: 20%;
  /* background-color: blueviolet; */
  display: block;
}

#squiggle-wrap .squiggle {
  width: 100%;
  height: 100%;
}

#sandtimer-wrap {
  position: absolute;
  top: 10%;
  right: 5%;
  transform: scale(1);
  width: 10%;
  /* background-color: blueviolet; */
  display: block;
}

#sandtimer-wrap .sandtimer {
  width: 100%;
  height: 100%;
}
.game-over {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 20px;
  font-family: "04b19";
  text-align: center;
  display: none;
  width: 1%;
  height: 1%;
  background-color: burlywood;
}

#sign-in-button {
  color: #d57da5;
  z-index: 100;
  text-align: center;
  font-family: Futura;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 20px 0px;
}

#sign-in-button:hover {
  color: white;
}

#skip-button p:hover {
  color: white;
  cursor: pointer;
}
#skip-button {
  color: #f0c687; /* Removed quotes */
  z-index: 100;
  text-align: center;
  font-family: Futura;
  background: transparent;
  border: none;

  font-size: 1em;
}

.start-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.player-gif {
  position: absolute;
  width: 45px; /* Adjust size as needed */
  height: 45px; /* Adjust size as needed */
  pointer-events: none; /* Ensure the image doesn't block inputs */
  display: none; /* Hide by default, will be shown when game starts */
}

#blackfade {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* background-color: #d57da5; */
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  pointer-events: none;
}

.bf-1 {
  position: absolute;
  top: -20px;
  width: 100%;
}

.bf-2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: rotate(180deg);
}

.bf-3 {
  position: absolute;
  left: 0;
  height: 100%;
  transform: scale(-1);
}
.bf-4 {
  position: absolute;
  right: 0;
  height: 100%;
}

.outer .inner .spotify {
  position: absolute;
  background: url(assets/spotify-logo.png) center center no-repeat;
  background-size: cover;
  left: 44.7777777778%;
  top: 93.2336182336%;
  height: 6.0541310541%;
  width: 10.4444444444%;
  pointer-events: none;
}

.landscape.touch .outer .inner .spotify {
  display: none;
}
@media screen and (max-height:  570px) {
  .outer .inner .spotify {
    display: none;
  }
}

.outer .inner .box .intro {
  box-sizing: border-box;
  background: url(assets/sky.png) center center no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 5%;
}
.outer .inner .box .intro img.follow-you {
  display: block;
  margin: clamp(14px, 2vw, 28px) 0;
  width: 55%;
}
.outer .inner .box .intro p {
  color: #f2c889;
  font-size: clamp(10px, 1.6vw, 18px);
  width: 30ch;
  text-align: center;
  padding-bottom: clamp(7px, 1vw, 14px);
}
.outer .inner .box .intro p:first-of-type {
  width: 40ch;
}
.outer .inner .box .intro a.sign-in {
  color: #d780a7;
  font-size: clamp(14px, 2vw, 28px);
  text-transform: uppercase;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
}
.outer .inner .box .intro a.sign-in:hover {
  color: #efcedd;
}
.outer .inner .box .intro a.skip {
  color: #f2c889;
  font-size: clamp(14px, 1.6vw, 18px);
  padding-top: clamp(10px, 2vw, 22px);
  text-decoration: none;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
}
.outer .inner .box .intro a.skip:hover {
  color: #f7ddb7;
}

.outer .inner .box .outro {
  box-sizing: border-box;
  background: #181816;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: none;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 5%;
}
.outer .inner .box .outro.hidden {
  opacity: 0;
  pointer-events: none;
}
.outer .inner .box .outro:before {
  background: url(assets/sky.png) center center no-repeat;
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.outer .inner .box .outro-left {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 33.33%;
}
.outer .inner .box .outro-left p {
  color: #dedbe1;
  font-size: clamp(14px, 1.6vw, 18px);
  text-transform: uppercase;
  padding-bottom: clamp(14px, 1.6vw, 18px);
}
.outer .inner .box .outro-left p.score {
  color: #d780a7;
}
.outer .inner .box .outro-middle {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 33.33%;
}
.outer .inner .box .outro-middle a.pre-order-image-link {
  display: inline-block;
  width: 62%;
}
.outer .inner .box .outro-middle a.pre-order-image-link img {
  display: block;
  height: auto;
  width: 100%;
}
.outer .inner .box .outro-middle p {
  color: #f2c889;
  font-size: clamp(14px, 1.6vw, 18px);
  padding: clamp(14px, 1.6vw, 18px) 0;
}
.outer .inner .box .outro-middle a.pre-order-text-link {
  color: #f2c889;
  font-size: clamp(14px, 1.6vw, 18px);
  text-transform: uppercase;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
}
.outer .inner .box .outro-middle a.pre-order-text-link:hover {
  color: #fcf3e5;
}
.outer .inner .box .outro-right {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 33.33%;
}
.outer .inner .box .outro-right a {
  color: #d780a7;
  font-size: clamp(14px, 1.6vw, 18px);
  text-transform: uppercase;
  -webkit-transition: 250ms ease-in-out;
  transition: 250ms ease-in-out;
}
.outer .inner .box .outro-right a:hover {
  color: #efcedd;
}

.share {
  color: #efcedd;
  padding-top: 20px;
}
.share span {
  color: #d780a7; 
  text-transform:  uppercase;
}
.share a {
  color: #000;
  border-radius: 50%;
  background: #f2c889;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  text-decoration: none;
  transition: 250ms ease-in-out;
}
.share a:hover {
  background: #d780a7;
  color: white;
}

.audio-toggle {
  position:  absolute;
  top: 0;
  left: 0;
  padding: 10px;
  z-index: 100;
  cursor: pointer; 
}

.audio-toggle.hidden {
  display: none;
  pointer-events: none;
}

.audio-toggle i {
  color: white;
  font-size: 20px;
  transition:  150ms ease-in-out;
}
.audio-toggle i:nth-of-type(2) { display: none; }

.audio-toggle:hover i {
  color: rgba(255,255,255,.71);
}
.audio-toggle.playing i:nth-of-type(1) { display: none; }
.audio-toggle.playing i:nth-of-type(2) { display: block; }


#score-display {  
  color:  pink;
  text-align:  center;
  position:   relative;
  z-index:  1;  
}