@charset "UTF-8";
/* CSS Foot Pop 4/30/2026 */

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: #fff url("../img/bg.svg") center center repeat-x;
  background: #fff url("../img/bg.jpg") center center no-repeat;
  display: grid;
  font-family:arial, san-serif;
  place-items: center;
  margin: 0;
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

#input_layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  touch-action: none;
}
body.loading #input_layer,
body.end #input_layer {
  display:none;
}
body {
  touch-action: none;
}
#ui_player, #ui_stage {
  touch-action: none;
}

.tutorial {
  display:none;
  aspect-ratio: 9 / 16;

  width: min(100vw, calc(100dvh * (9 / 16)));
  height: min(100dvh, calc(100vw * (16 / 9)));

  position: relative;      /* anchor for absolute children */
  overflow: hidden;        /* clip anything outside */

  /* optional but useful */
  container-type: inline-size;    /* enables container queries if you want them */
  z-index:2010;
}
body.onboard .tutorial {
  display:flex;
}
.tutorial .cards,
.tutorial .card,
.tutorial .card img {
  height:100%;
  width:100%;
}
.tutorial .card-navigation {
  align-items: center;
  bottom:42%;
  display: flex;
  height:12%;
  justify-content: space-between;
  left:4%;
  position: absolute;
  width:92%;
}
.tutorial .card-navigation .pointer-left,
.tutorial .card-navigation .pointer-right {
  align-content: center;
  cursor: pointer;
  display: flex;
  height:100%;
  justify-content: flex-start;
  padding-left:2cqw;
  padding-right:2cqw;
  width:100%;
}
.tutorial .card-navigation .pointer-left.hide,
.tutorial .card-navigation .pointer-right.hide {
  visibility: hidden;
}
.tutorial .card-navigation .pointer-right  {
  justify-content: flex-end;
}
.tutorial .card-navigation img {
  width:25%;
  height:auto;
}
.tutorial .card,
body.onboard .loading,
body.onboard #ui_stage,
body.onboard #input_layer {
  display:none !important;
}
body.onboard {
  background:#fff;
}
.tutorial .card.active {
  display:block !important;
}
.tutorial .skip {
  bottom:2%;
  color:#666;
  font-size:5cqw;
  position:absolute;
  right:45%;
  text-decoration: none;
}

.stage {
  aspect-ratio: 9 / 16;

  width: min(100vw, calc(100dvh * (9 / 16)));
  height: min(100dvh, calc(100vw * (16 / 9)));

  position: relative;      /* anchor for absolute children */
  overflow: hidden;        /* clip anything outside */

  /* optional but useful */
  container-type: inline-size;    /* enables container queries if you want them */
  
  touch-action: none;
}
.player {
  position: relative;
  z-index:1998;
}
.player.mirror {
  transform: scaleX(-1); /* mirror */
}



/*wrapper top*/
.wrapper-top {
  align-items: center;
  display: flex;
  height:17%;
  justify-content:space-between;
  left:4%;
  position:absolute;
  top:2%;
  width:92%;
}
.wrapper-top .label {
  font-size:3cqw;
  font-weight:bold;
  text-transform: uppercase;
}




/* clock */
.wrapper-top .logo,
.wrapper-top .score {
  align-items: flex-start;
  display: flex; 
  line-height: 1;
  justify-content: flex-start;
  flex-direction: column;
}
.wrapper-top .score {
  color:#000;
  font-size:10cqw;
  font-weight:bold;
  left:0;
  position: absolute;
  top:4%; 
}
.wrapper-top .score .label {
  color:#000;
  margin-bottom:2.25cqw;
}
.wrapper-top .score .label.best {
  color:#ccc;
  margin-top:2.25cqw;
  opacity: 0;
}
.wrapper-top .score .label.best.active {
  opacity:1;
}

/* score */
.wrapper-top .logo {
  aspect-ratio:862 / 670;
  align-items: center;
  background: url("../img/logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display:flex;
  justify-content: center;
  position: absolute;
  right:0%;
  top:4%;
  width:30%;
}

.wrapper-top .logo .clock-face {
  align-items: center;
  background:#d9d8d8;
  border:.3cqw solid #000;
  border-radius:50%;
  color:#000;
  display: flex;
  font-size:5.5cqw;
  font-weight:bold;
  height:9cqw;
  justify-content: center;
  margin-right: .25cqw;
  margin-top: 7.75cqw;
  text-align:center;
  width:9cqw;
}

.wrapper-top .logo .clock-face.danger {
  color:#bc0000;
  animation: popClock 0.8s ease-out forwards;
}





/* wrapper bottom */
.wrapper-bottom {
  align-items: center;
  display: flex;
  flex-direction: column;
  height:22%;
  justify-content:space-evenly;
  left:4%;
  position:absolute;
  bottom:0;
  width:92%;
}
.wrapper-bottom .trick-name {
  color:#fff;
  font-size:8cqw;
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
  opacity: 0;
  transform: scale(1);
  will-change: transform, opacity;
  text-shadow: .5cqw .5cqw 0 #000;
}
.wrapper-bottom .trick-name.active {
  animation: popInStay 0.2s ease-out forwards;
}
.wrapper-bottom .heckler {
  font-size:6cqw;
  font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
  opacity: 0;
  will-change: opacity;
  color: #fff;
  text-align: center;
  text-shadow: .5cqw .5cqw 0 #000;
  z-index: 2000;
  transition: all .8s ease;
}
.wrapper-bottom .heckler.active {
  /*animation: fadeIn 0.2s ease forwards;*/
  opacity:1;
}
.wrapper-bottom .heckler.combo {
  color:#fedd46;
}

@keyframes popInStay {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  8% {
    opacity: 1; /* instant pop visible */
    transform: scale(1); /* overshoot */
  }
  60% {
    transform: scale(0.5); /* subtle settle (optional) */
  }
  80% {
    transform: scale(1.2); /* subtle settle (optional) */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* final resting state */
  }
}

@keyframes popClock {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  8% {
    opacity: 1; /* instant pop visible */
    transform: scale(1.5); /* overshoot */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* final resting state */
  }
}


/* volume */
.mute {
  height:10cqw;
  width:10cqw;
  position:absolute;
  top:-8%;
  left:13%;
  z-index: 20000;
}
body.end .mute {
  z-index:1999;
}
.mute img {
  aspect-ratio:1/1;
  cursor: pointer;
  height:auto;
  width:100%;
}
.mute .mute-off {
  display:block;
  transform-origin: center;
  animation: speakerPop .9s infinite ease-in-out;
}
.mute .mute-on {
  display:none;
}
.mute.on .mute-on {
  display:block;
}
.mute.on .mute-off {
  display:none;
}
body.loading .mute {
  display:none;
}
@keyframes speakerPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* wraper pop */
.wrapper-pop {
  align-items: center;
  display: flex;
  height: 28%;
  justify-content: space-around;
  left: 4%;
  position: absolute;
  top: 9%;
  width: 92%;
}
.wrapper-pop .plus-score,
.wrapper-pop .plus-time {
  opacity: 0;
  font-size: 6cqw;
  font-weight: bold;
  pointer-events: none;
  transform: translate(0, 0) scale(1); /* define baseline */
}

/* PLUS SCORE */
.wrapper-pop .plus-score {
  color: #fff;
  font-weight:bold;
  text-shadow: .5cqw .5cqw 0 #000;
}

.wrapper-pop .plus-score.active {
  animation: scorePop 0.9s ease forwards;
}

.wrapper-pop .plus-score.combo {
  color: #fedd46;
}

@keyframes scorePop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(2);
  }
  5% {
    opacity: 1; /* quick pop */
  }
  100% {
    opacity: 0;
    transform: translate(-3cqw, -12cqw) scale(0.25);
  }
}


/* TIME (green, moves up-right, slower) */
.wrapper-pop .plus-time {
  color: #fedd46;
  font-weight:bold;
  text-shadow: .5cqw .5cqw 0 #000;
}

.wrapper-pop .plus-time.active {
  animation: timePop 1.5s ease forwards;
}

@keyframes timePop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(2);
  }
  5% {
    opacity: 1; /* quick pop */
  }
  100% {
    opacity: 0;
    transform: translate(3cqw, -12cqw) scale(0.25);
  }
}



/* wrapper left*/
.wrapper-left {
  align-items: center;
  display: flex;
  display:none;
  height:100%;
  flex-direction: column;
  justify-content:center;
  left:4%;
  position:absolute;
  top:0%;
  width:10%;
}
.wrapper-left .stall-meter {
  align-items: flex-end;
  background: #fff;
  border:1cqw double #ccc;
  border-radius:10cqw;
  display: flex;
  flex-direction: column;
  height:55%;
  justify-content: center;
  position: relative;
  width:30%;
}
.wrapper-left .stall-meter .stall-bar {
  height:100%;
  width:100%;
}
.wrapper-left .stall-meter .stall-bar.color {
  background:green;
  border-radius:10cqw;
  background: linear-gradient(
    to bottom,
    green 0%,
    green 60%,
    yellow 65%,
    orange 95%,
    red 100%
  );
}
.wrapper-left .stall-meter .wrapper-pointer {
  height:95%;
  left:0;
  position: absolute;
  top:5%;
  width:100%;
}
.wrapper-left .stall-meter .wrapper-pointer  .stall-pointer {
  bottom:80%;
  height:auto;
  left:-3cqw;
  position: absolute;
  width:9cqw;
}
.wrapper-left .stall-label {
  color:#000;
  font-size:3cqw;
  font-weight:bold;
  left:0;
  position: absolute;
  text-transform: uppercase;
  top:20%;
}








/* wrapper right*/
.wrapper-right {
  align-items: center;
  display: flex;
  height:100%;
  flex-direction: column;
  justify-content:center;
  right:8%;
  position:absolute;
  top:0%;
  width:10%;
}
.wrapper-right .next-trick {
  font-size: 3cqw;
  font-weight: bold;
  position: absolute;
  text-transform: uppercase;
  top: 17%;
  transform: rotate(-15deg);
  width: 20cqw;
}
.wrapper-right .swipes {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 55%;
  width:100%;
}

.wrapper-right .swipes img {
  aspect-ratio: 1 / 1;
  margin-bottom:4cqw;
  width: 100%;
  max-height: calc(100% / 7);
}







/*loading*/
body.loading {
  opacity:1;
}

.loading {
  align-items: center;
  background:#fff;
  container-type:inline-size;
  display:flex;
  height:100%;
  justify-content: center;
  position: absolute;
  width:100%;
  z-index:2001;
  transition: all .8s ease;
}
.loading .loading-text {
  font-size: 5cqw;
  font-weight:bold;
  opacity: 1;
  position: absolute;
  transition: opacity 1.2s ease;
  width: 97%;
  text-align: center;
  z-index: 2002;
  top: 38.5%;
}
.loading .loading-heckler {
  font-size: 4cqw;
  font-weight:normal;
  opacity: 1;
  position: absolute;
  transition: opacity 1.2s ease;
  width: 97%;
  text-align: center;
  z-index: 2002;
  top: 51%;
}
.loading .loading-text.hide,
.loading .loading-heckler.hide {
  opacity: 0;
}
.loading.hide {
  opacity:0;
}
.loading.remove {
  display:none;
}
.loading .loading-content {
  aspect-ratio: 9 / 16;

  width: min(100vw, calc(100dvh * (9 / 16)));
  height: min(100dvh, calc(100vw * (16 / 9)));

  position: relative;      /* anchor for absolute children */
  overflow: hidden;        /* clip anything outside */

  /* optional but useful */
  container-type: inline-size;    /* enables container queries if you want them */
  
  touch-action: none;
}
.loading .loading-content img {
  z-index:2000;
}
.wrapper-btn-loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: space-around;
  left: 4%;
  position: absolute;
  top: 54%;
  width: 92%;
  z-index:2003;
}
.btn-start-game {
  background: url("../img/btn-start-game.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color:#000;
  font-size:3cqw;
  font-weight:bold;
  margin-bottom:15%;
  margin-top:8%;
  padding:2cqw 15cqw;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
}
.btn-how-to-play {
  color:#666;
  font-size:4.5cqw;
  text-decoration: none;
}
.btn-start-game.hide,
.btn-how-to-play.hide {
  display:none;
}
.wrapper-trick-list {
  bottom:5%;
  font-size:3cqw;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  width:100%;
}
.btn-trick-list {
  color:#000;
  text-decoration: underline;
}






/* END GAME */
body.end .ui-end {
  display:flex;
}
.ui-end {
  align-items: center;
  background:rgba(255,255,255,0.95);
  display:none;
  height:100%;
  justify-content: center;
  position: absolute;
  width:100%;
  z-index:2000;
}
.wrapper-btns {
  align-items: center;
  aspect-ratio: 9 / 16;
  container-type: inline-size; 
  flex-direction:column;
  height: min(100dvh, calc(100vw * (16 / 9)));
  justify-content: center;
  overflow: hidden;
  position: relative;           
  touch-action: none;
  width: min(100vw, calc(100dvh * (9 / 16)));
}
.wrapper-btns.active {
  display:flex;
}
.columns {
  align-items: flex-start;
  display: flex;
  justify-content: space-around;
  margin-bottom:10cqw;
  width:100%;
}
.column {
  text-align: center;
  width:100%;
}
.txt-game-over {
  color:#000;
  font-size:12cqw;
  font-family: "Fontdiner Swanky", serif;
  font-weight: 400;
  font-style: normal;
  margin-bottom:2cqw;
  margin-top:0cqw;
}
.eyebrow {
  font-size:3cqw;
  font-weight:bold;
  text-transform: uppercase;
  margin-bottom:2cqw;
  margin-top:0cqw;
}
.final-score {
  color:#000;
  font-size:10cqw;
  font-weight:bold;
  margin-bottom:10cqw;
  margin-top:0cqw;
}
.final-tricks {
  color:#000;
  font-size:10cqw;
  font-weight:bold;
  margin-bottom:0cqw;
  margin-top:0cqw;
}
.final-combo {
  color:#000;
  font-size:10cqw;
  font-weight:bold;
  margin-bottom:0cqw;
  margin-top:0cqw;
}
.difficulty {
  color:#000;
  font-size:10cqw;
  font-weight:bold;
  margin-bottom:0cqw;
  margin-top:0cqw;
}
.rank {
  margin-bottom:15cqw;
  margin-top:2cqw;
  width:90%;
}
.rank img {
  width:100%;
  height:auto;
}
.btn-restart-game {
  align-items: center;
  background: url("../img/btn-restart-game.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color:#000;
  cursor:pointer;
  display:flex;
  font-size:3cqw;
  font-weight:bold;
  height:auto;
  justify-content: center;
  margin-bottom:10cqw;
  padding:7.5cqw;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
  width:100%;
}
.btn-view-replay {
  align-items: center;
  background: url("../img/btn-view-replay.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color:#000;
  cursor:pointer;
  display:flex;
  font-size:3cqw;
  font-weight:bold;
  height:auto;
  justify-content: center;
  margin-bottom:10cqw;
  padding:7.5cqw;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
  width:100%;
}
.btn-highscore {
  align-items: center;
  background: url("../img/btn-high-score.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color:#000;
  cursor:pointer;
  display:flex;
  font-size:3cqw;
  font-weight:bold;
  height:auto;
  justify-content: center;
  padding:7.5cqw;
  text-align:center;
  text-decoration: none;
  text-transform: uppercase;
  width:100%;
}
.btn-restart-game span {
  background:rgba(255,255,255,.2);
  border-radius:2cqw;
  padding:1.5cqw 3cqw;
}
.btn-view-replay span {
  background:rgba(255,255,255,.7);
  border-radius:2cqw;
  padding:1.5cqw 3cqw;
}
.btn-highscore span {
  background:rgba(255,255,255,.4);
  border-radius:2cqw;
  padding:1.5cqw 3cqw;
}






/* prevent rotation - mobile only */
.rotate-device {
  display: none;
}
.rotate-message {
  text-align:center;
}
.rotate-message img {
  margin:0 auto 15% auto;
  width:45%;
}
@media (orientation: landscape) and (pointer: coarse) {
  body {
    background:#fff;
  }
  #ui_stage,
  #input_layer,
  #ui_end,
  #tutorial,
  #ui_loading {
    display: none !important;
  }

  .rotate-device {
    align-items: center;
    display: flex;
    height: 100vh;
    justify-content: center;
    width: 100%;
  }

  .rotate-message {
    color: #000;
    font-weight: bold;
    font-size: 20px;
  }
}

@media (orientation: portrait) and (pointer: coarse) {
  .rotate-device {
    display: none;
  }
}







/* animations */
.pulse {
  animation: vibratePulse 0.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes vibratePulse {
  0% {
    transform: scale(1.8);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1.8);
  }
}

.pulse2 {
  animation: vibratePulse2 0.8s ease-in-out infinite;
  transform-origin: center;
}

@keyframes vibratePulse2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}