/* Overlay */
#ageBarUI{
  z-index: 999;  
  position:absolute;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  width: min(700px, 92vw);
  pointer-events:none;
  font-family:system-ui, sans-serif;
  bottom: calc(20px + env(safe-area-inset-bottom));
}

/* Glass panel */
.age-container{
  background:rgba(15,20,15,0.55);
  backdrop-filter:blur(12px);
  border-radius:14px;
  padding:18px 22px 28px 22px;
  box-shadow:
      0 8px 30px rgba(0,0,0,0.5),
      inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Track */
#ageTrack{
  position:relative;
  height:6px;
  background:rgba(255,255,255,0.12);
  border-radius:10px;
}

/* Progress fill */
#ageProgress{
  position:absolute;
  height:100%;
  width:0%;
  border-radius:10px;
  background:linear-gradient(90deg,#6fdc6f,#2e7d32);
  transition:width 0.6s cubic-bezier(.22,.8,.32,1);
}

/* Glowing dot */
#ageDot{
  position:absolute;
  top:50%;
  left:0%;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#9cff9c;

  box-shadow:
    0 0 8px #7fff7f,
    0 0 18px #4cff4c,
    0 0 35px rgba(76,255,76,0.6);

  transition:left 0.6s cubic-bezier(.22,.8,.32,1);
}

/* Tick marks */
.tick{
  position:absolute;
  width:2px;
  height:10px;
  background:rgba(255,255,255,0.25);
  top:50%;
  transform:translate(-50%,-50%);
}

/* Age text */
#ageLabel{
  position:absolute;
  top:32px;
  left:50%;
  transform:translateX(-50%);
  color:#e8ffe8;
  font-size:14px;
  letter-spacing:0.05em;
  opacity:0.9;
}

@media (max-width: 600px) {

  #ageBarUI {
    bottom: 14px;
    width: 94vw;
  }

  .age-container {
    padding: 12px 14px 20px 14px;
    border-radius: 10px;
  }

  #ageTrack {
    height: 4px;
  }

  #ageDot {
    width: 12px;
    height: 12px;
    box-shadow:
        0 0 6px #7fff7f,
        0 0 12px rgba(76,255,76,0.5);
  }

  #ageLabel {
    font-size: 12px;
    top: 24px;
  }

  .tick {
    height: 6px;
  }
}