/* language chooser
*/


header div button:hover
{
  background-color: hsl(var(--accent));

}



#contextMenu {
  position: absolute;
  border: 1px solid rgba(0, 0, 0, 0.06);
  top: 65px;
  right: 10px;
  background: white;
  border-radius: 8px;
  /*padding: 10px 0;*/
  min-width: 160px;
  width: 222px;
  z-index: 1000;
  /*display: none;*/
  box-shadow:
    0px 15px 32px 0px rgba(55, 69, 2, 0.1),
    0px 58px 58px 0px rgba(55, 69, 2, 0.09),
    0px 131px 78px 0px rgba(55, 69, 2, 0.05),
    0px 232px 93px 0px rgba(55, 69, 2, 0.01),
    0px 363px 102px 0px rgba(55, 69, 2, 0);

  transition: opacity 5s ease, transform 5s ease;

  /*max-height: 571px;*/
  overflow: scroll;

  height: 80vh;
  max-height: 80vh;
}


#contextMenu {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

#contextMenu.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}


.menu-item {
  padding: 12px;
  /*padding: 8px 16px;*/
  cursor: pointer;
  transition: background 0.2s;
  /*font-family: Inter Variable;*/
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: -0.5%;

  border-bottom: 1px solid rgba(245, 245, 245, 1);


  display: flex; align-items: center; gap: 12px;

}
.menu-item.forInput {
  padding:0px;padding-left: 12px;
}

.menu-item input {
  width:100%;
font-weight: 400;
font-size: 16px;
line-height: 21px;
letter-spacing: -0.5%;
color:rgba(133, 133, 133, 1);
border:0px;
outline:none;
}
.menu-item input:focus {
  outline: none;box-shadow: 0 0 0 1px rgba(245, 245, 245, 1);;
}

.menu-item:last-child {
  border-bottom:0px;
}
.menu-item:hover {
}

/*
language chooser end
*/




#addPoint{
    margin-top:2rem;padding:.65rem 1.6rem;font-size:1rem;font-weight:600;
    border:none;border-radius:32px;cursor:pointer;color:#fff;
    background:linear-gradient(45deg,#ff7a18 0%,#af002d 51%,#8111ff 100%);background-size:200% auto;
    transition:.35s}
  #addPoint:hover{background-position:right center;box-shadow:0 0 20px rgba(255,122,24,.55)}

  /* ---------- Avatar “pop” ---------- */
  @keyframes pop{
    0%{transform:scale(1) rotate(0)}
    20%{transform:scale(1.35) rotate(10deg)}
    60%{transform:scale(0.9) rotate(-8deg)}
    100%{transform:scale(1) rotate(0)}
  }
  .avatar.pop{animation:pop .8s cubic-bezier(.34,1.56,.64,1)}

  /* ---------- Points pulse + sparkle ---------- */
  @keyframes pulseText{
    0%  {transform:scale(1);filter:drop-shadow(0 0 0 #ffd700)}
    50% {transform:scale(1.6);filter:drop-shadow(0 0 8px #ffd700)}
    100%{transform:scale(1);filter:drop-shadow(0 0 0 #ffd700)}
  }
  .points-parent.pulse{animation:pulseText .8s ease-out}

  /* Tiny one-off confetti burst (optional eye-candy) */
  .points-parent.pulse::after{
    content:"";position:absolute;left:50%;top:.2rem;
    width:10px;height:10px;background:transparent;
    box-shadow:
      0 -10px #f6d743,   0 10px #e57f98,
     12px 0   #5fd9bc, -12px 0  #f6d743,
      8px 8px #e57f98,  -8px -8px #5fd9bc;
    animation:confetti .6s ease-out forwards
  }
  @keyframes confetti{
    0%  {opacity:1;transform:translate(-50%,0) scale(1)}
    100%{opacity:0;transform:translate(-50%,60px) scale(0)}
  }