#akari-tap-play{ text-align:center; margin:16px 0; position:relative; }
#akari-audio-on, #akari-bgm-btn{
  font-size:16px; padding:10px 18px; margin:6px 6px 10px; border-radius:999px;
}
#akari-tap-btn{
  display:block; margin:8px auto 0;
  max-width:220px; width:70%; height:auto; cursor:pointer;
  transition:transform .08s ease, filter .08s ease;
}
#akari-tap-btn:active{ transform:scale(.92); filter:brightness(1.1); }
#akari-tap-btn.punit{ animation:punit .2s ease; }
#akari-praise{ margin-top:6px; font-size:16px; font-weight:bold; }
#akari-count{ margin-top:4px; font-size:14px; color:#888; }

/* Lane / Notes */
#akari-lane{
  position:relative;
  margin:10px auto 6px;
  width:min(420px, 92vw);
  height:320px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.65);
  overflow:hidden;
  touch-action:manipulation;
}

#akari-hit{
  position:absolute;
  left:0; right:0;
  top:72%;
  height:4px;
  background:rgba(0,0,0,.55);
  box-shadow:0 0 0 6px rgba(0,0,0,.04);
}

.akari-note{
  position:absolute;
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(255,105,180,.85);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
  will-change:top, opacity;
}

.akari-note.hit{ opacity:0; transform:translate(-50%,-50%) scale(1.35) !important; transition:all .12s ease; }
.akari-note.miss{ opacity:.15; filter:grayscale(1); transition:all .12s ease; }

/* Sparkle (キラン) */
.akari-sparkle{
  position:absolute;
  width:10px;
  height:10px;
  transform:translate(-50%,-50%);
  animation:sparkle .45s ease-out forwards;
}
.akari-sparkle::before,
.akari-sparkle::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:64px; height:10px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
  transform:translate(-50%,-50%);
  border-radius:999px;
}
.akari-sparkle::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

@keyframes sparkle{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(0deg) }
  35%{ opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(15deg) }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.35) rotate(25deg) }
}

@keyframes punit{ 0%{transform:scale(.92)} 60%{transform:scale(1.08)} 100%{transform:scale(1)} }
@keyframes float{ to{ opacity:0; transform:translateY(-80px) } }