:root {
  --bg: #eeeef7;
  --ink: #1b1b1f;
}

.hidden { display: none !important; }

@font-face {
  font-family: NB;
  src: url(font/NeueBrucke.ttf);
}

* { box-sizing: border-box; font-family: nb;}
html, body { margin: 0; padding: 0; overscroll-behavior-y: contain;}
body {
  background: var(--bg);
  color: var(--ink);
  margin: 0 auto; padding: 0rem; 
}

.sound-hint {
  position: fixed;
  top: 12dvh;
  left: 0;
  width: 100%;
  height: 88dvh;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  z-index: 1000;
  border-radius: 1rem;
  transition: opacity 400ms ease-in-out;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}


.hide {
  opacity: 0;
  z-index: -10000;
  pointer-events: none;
}

.sound-hint img:first-of-type {
  width: 90%;
  left: 5%;
  position: absolute;
  border-radius: 10px;
  border: 2px #1b1b1f solid;
}

.sound-hint img:last-of-type {
  width: 90%;
  animation: skate 2s ease-out;
  position: absolute;
}

button:active {
  transform: scale(0.95);
}


@keyframes skate {
  0% {
      transform: translateX(50%);
  }

  100% {
      transform: translateX(0%);
  }
}



h2 {
  margin: 0;
  font-size: 1.2rem;
}

button {
  cursor: pointer;
}

header {
  height: 12dvh;
  display: flex;
  align-items: center;
}

header img {
  margin-left: 1dvh;
  height: 10dvh;
}


.card {
  padding: 2dvh;
  height: 88dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 2dvh;
}

.wrappy {
  width: 100%;
}

.label { display: block; margin-bottom: .25rem; font-weight: 600; }
.input {
  width: 100%;
  padding: 0.875rem;
  font-size: 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 2.5px 3px 0 var(--ink);
  outline: none;
  transition: ease 0.25s;
  margin: .5rem 0 1rem 0;
}

.input:focus {
  box-shadow: 4px 5px 0 var(--ink);
}

.avatar-fieldset {
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
}

.avatar-carousel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 1vw;
}

.avatar-arrow {
  background: none;
  border: none;
  cursor: pointer;
  width: 12vw;
}

.arrow {
  width: 100%;
  height: auto;
}

#avatarImage {
  width: 65vw;
  height: auto;
  object-fit: contain;
}

.btn {
  padding: .5rem 2rem;
  border: none;
  border-radius: 100px;
  background: linear-gradient(145deg, #82e9fdf3, #ab9bfdfe);
  box-shadow:    
  #4564ff -2px -2px 10px inset,
  #ffffffa0 4px 4px 7px 1px inset,
  #5e53f686 0px -23px 25px 0px inset,
  #d0fffe48 0px -36px 30px 0px inset, 
  #3700ff0b 0px -79px 40px 0px inset,   
  rgba(0, 0, 0, 0.06) 0px 0.5px 0px, 
  rgba(0, 0, 0, 0.055) 1px 1px 0.5px, 
  rgba(0, 0, 0, 0.156) 1px 1px 2px,
  rgba(62, 28, 28, 0.091) 2px 2px 4px, 
  rgba(0, 0, 0, 0.073) 8px 4px 10px;
  transition: 300ms ease-out;
  overflow: hidden;
  filter: brightness(110%) contrast(110%);
  font-family: NB;
  color: #fff;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.btn::before,
.btn::after{
  content:"";
  position:absolute; left:15%; width:70%; height:2px; border-radius:50%;
  filter: blur(1px);
  pointer-events:none;
}
.btn::before{ top:2px; background: rgba(250, 250, 250, 0.854); }
.btn::after{  bottom:1px; background: rgba(250, 250, 250, 0.222); }

.btn:hover {
  box-shadow:    
  #5933e1 -2px -2px 10px inset,
  #ffffffa0 4px 4px 7px 1px inset,
  #7068e286 0px -23px 25px 0px inset,
  #d0fffe48 0px -36px 30px 0px inset, 
  #3700ff0b 0px -79px 40px 0px inset,   
  rgba(0, 0, 0, 0.06) 0px 0.5px 0px, 
  rgba(0, 0, 0, 0.055) 1px 1px 0.5px, 
  rgba(0, 0, 0, 0.156) 1px 1px 2px,
  rgba(62, 28, 28, 0.091) 2px 2px 4px, 
  rgba(0, 0, 0, 0.073) 8px 4px 10px;
}




.flex {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;

}

/* page 2 starts here 
____________________________________*/


.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 88dvh;
  justify-content: space-between;
  align-items: center;
  padding: 2dvh 1.8dvh;
}

.lower-container {
  justify-self: flex-end;
  width: 100%;
}


.instructions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.7rem;
  height: 23dvh;
  padding-inline: 1rem;
  width: 100%;
}

.img-container {
  height: 12dvh;
  align-self: flex-end;
} 

.avatar {
  height: 13dvh;
}

.bubble {
  line-height: 1.3rem;
  background-color: #fff !important; 
  will-change: contents, background-color; 
  transition: none !important; 
  padding: 1.3rem;
  text-align: center;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.089) 1px 1px 1px, rgba(0, 0, 0, 0.083) 2px 2px 1px,
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(235, 235, 235, 0.03) -6px -2px 16px 0px;
  position: relative;
  width: 100%;
  }
  
  .bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 45%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: #fff;
    border-left: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-left: -17px;
  }

  /* Source pretzel (the one you drag) */
.brezel {
  display: block;
  width: clamp(90px, 24vw, 160px);  /* drive size by width */
  height: auto;                     /* keep aspect ratio */
  z-index: 10;
  animation: pulse 2s infinite ease-in-out;
  object-fit: contain;
}

/* Optional: cap by viewport height without forcing a fixed height */
@supports (height: 1dvh) {
  .brezel { max-height: 20dvh; }    /* soft cap; still keeps ratio */
}

/* Floating clone during drag */
.draggable-mirror {
  position: fixed !important;       
  pointer-events: none;
  z-index: 9999;
}
.draggable-mirror img {
  display: block;
  width: 100%;
  height: auto;                      
  object-fit: contain;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1);
        filter: brightness(110%);
    }

    100% {
        transform: scale(0.95);
    }
}

p {
  margin: 0%;
  padding: 0;
}




  .item { cursor: grab; user-select: none; display: inline-flex; }
 
  .draggable--is-dragging { filter: brightness(110%); }
  .draggable-mirror { box-shadow: none;}



  .in-basket { opacity: 0; pointer-events: auto; }

  .submit-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  
  }

  .btn2 {
    border: none;
    outline: none;
    background-color: transparent;
 
  }

  .btn2 img {
    height: 2rem;
    width: auto;
  }

  

  #step-sort .bubble small {
    font-size: .9rem;     
  }

  .baskets {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5vw;
    padding: 0dvh 2dvh 6dvh 2dvh;
    width: 100%;
   
    border: solid 1px var(--ink);
    border-radius: 100%;
    
  }
  
  .basket {
    position: relative;
    width: min(28vw, 180px);
  }
  
  .basket img {
    width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  
  
  .basket2 {
    align-self: flex-start;
  }
  
  .basket .slot {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
  }

  .note {
    text-align: center;
    margin-top: 5px;
  }
  
  /* keep your existing .hidden for other places */
.hidden { display: none !important; }
.draggable-mirror { z-index: 9999; }

.visible {
  display: block;
}
 
* {
  touch-action: none;   
}

.celebrate {
  width: 100vw;
  height: 88dvh;
  background-image: url(img/frame.png);
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  z-index: 1000;
  padding: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celebrate img {
  margin-top: 20dvh;
  width: 70vw;
  animation: pulse infinite 2s ease-in-out;
}





/* desktop
_______________________________ */

@media (min-width: 768px) {
  
.card {
  margin-inline: auto;
  height: 88dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 60%;
  gap: 2dvh;
  padding-block: 2dvh;
}

.wrappy {
  width: 100%;
}

.label { display: block; margin-bottom: .25rem; font-weight: 600; }
.input {
  width: 100%;
  padding: 0.875rem;
  font-size: 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: 2.5px 3px 0 var(--ink);
  outline: none;
  transition: ease 0.25s;
  margin: .5rem 0 1rem 0;
}

.input:focus {
  box-shadow: 4px 5px 0 var(--ink);
}

.avatar-fieldset {
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
}

.avatar-carousel {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 1vw;
}

.avatar-arrow {
  background: none;
  border: none;
  cursor: pointer;
  width: 8vw;
}

.arrow {
  width: 100%;
  height: auto;
}

#avatarImage {
  width: 35vw;
  height: auto;
  object-fit: contain;
}


.flex {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;

}

/* page 2 starts here 
____________________________________*/


.flex-container {
  display: flex;
  flex-direction: column;
  width: 60vw;
  height: 88dvh;
  justify-content: space-between;
  align-items: center;
  padding: 2dvh;
  margin-inline: auto;
}

.instructions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.7rem;
  height: 23dvh;
  padding-inline: 1rem;
  width: 100%;
}

.img-container {
  height: 12dvh;
  align-self: flex-end;
} 

.avatar {
  height: 12dvh;
}

.bubble {
  line-height: 1.3rem;
  background-color: #fff;
  padding: 1.3rem;
  text-align: left;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.25) 1px 0.0625em 0.0625em, rgba(0, 0, 0, 0.105) 4px 0.125em 0.5em, #3100b70c 0 0 25px 0;
  position: relative;
  width: unset;
  max-width: 50%;
  }
  
  .bubble:after {
    content: '';
    position: absolute;
    left: 0;
    top: 45%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-right-color: #fff;
    border-left: 0;
    border-bottom: 0;
    margin-top: -10px;
    margin-left: -17px;
  }

  .brezel {
    height: 14dvh;
    z-index: 10;
    animation: pulse 2s infinite ease-in-out;
    width: auto;
  } 



p {
  margin: 0%;
  padding: 0;
}


.lower-container {
  width: 100%;
  display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

  .item { cursor: grab; user-select: none; display: inline-flex; }
 
  .draggable--is-dragging { filter: brightness(110%); }
  .draggable-mirror { box-shadow: none;}



  .in-basket { opacity: 0; pointer-events: auto; }

  .submit-container {
    width: 100%;
    display: flex;
    align-items: center;

  }

  #step-sort .bubble small {
    font-size: .9rem;     
  }

  .baskets {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 5vw;
    padding: 0dvh 2dvh 8dvh 2dvh;
    width: 90%;
    border: solid 1px var(--ink);
    border-radius: 100%;
    
  }
  
  .basket {
    position: relative;
    width: 10vw;
  }
  
  .basket img {
    width: 100%;
    display: block;
    pointer-events: none;
    user-select: none;
  }
  
  
  .basket2 {
    align-self: flex-start;
  }
  
  .basket .slot {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: auto;
  }

  .note {
    text-align: center;
    margin-top: 5px;
  }
  
.btn {
  font-size: 1rem;
  height: 2.3rem;
}

.sound-hint {
  position: fixed;
  top: 12dvh;
  left: 0;
  width: 100%;
  height: 88dvh;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  z-index: 1000;
  border-radius: 1rem;
  transition: opacity 400ms ease-in-out;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hide {
  opacity: 0;
  z-index: -10000;
  pointer-events: none;
}

.sound-hint img:first-of-type {
  width: 30%;
  left: 35%;
  position: absolute;
  border-radius: 10px;
  border: 2px #1b1b1f solid;
}

.sound-hint img:last-of-type {
  width: 30%;
  animation: skate2 1.5s ease-out;
  position: absolute;
  left: 35%;
}

@keyframes skate2 {
  0% {
      transform: translateX(50%);
  }

  100% {
      transform: translateX(0%);
  }
}

.hide {
  opacity: 0;
  z-index: -10000;
  pointer-events: none;
}

}