.piano-hero {
  padding: 52px 20px 28px;
  text-align: center;
}

.piano-hero h1 {
  margin: 0;
  font-size: clamp(3.5rem, 8vw, 5.8rem);
  line-height: .88;
}

.piano-hero h1 span {
  color: var(--gold);
}

.piano-hero > p:last-child {
  max-width: 650px;
  margin: 21px auto 0;
  color: var(--muted);
  line-height: 1.65;
}

.piano-hero strong {
  color: var(--lavender);
}

.piano-game-shell {
  width: min(960px, calc(100% - 28px));
  min-height: 690px;
  margin: 12px auto 75px;
  padding: 16px;
  position: relative;
  border: 1px solid rgba(203, 186, 245, .2);
  border-radius: 30px;
  background: rgba(22, 29, 56, .9);
  box-shadow: var(--shadow);
}

.piano-game-bar {
  min-height: 70px;
  padding: 7px 18px 15px;
  display: grid;
  grid-template-columns: 145px 1fr 145px;
  align-items: center;
  gap: 15px;
}

.piano-stat {
  display: grid;
  text-align: center;
}

.piano-stat > span {
  color: var(--muted);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.piano-stat strong {
  color: var(--gold);
  font: 800 1.55rem/1.15 "Baloo 2";
}

.star-line {
  height: 1px;
  position: relative;
  background: linear-gradient(90deg, transparent, rgba(203, 186, 245, .38), transparent);
}

.star-line span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(246, 212, 123, .38);
  border-radius: 50%;
  color: var(--gold);
  background: #1a2342;
  box-shadow: 0 0 25px rgba(246, 212, 123, .2);
  font-size: 24px;
  transform: translate(-50%, -50%);
}

.piano-stage {
  min-height: 580px;
  padding: clamp(24px, 4vw, 42px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(105, 214, 196, .18);
  border-radius: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 8%, rgba(246, 212, 123, .13), transparent 31%),
    linear-gradient(165deg, rgba(8, 17, 35, .94), rgba(31, 22, 56, .96));
}

.night-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-star {
  position: absolute;
  color: rgba(246, 212, 123, .6);
  filter: drop-shadow(0 0 10px rgba(246, 212, 123, .45));
  animation: star-twinkle 2.4s ease-in-out infinite alternate;
}

.sky-star-one { left: 8%; top: 10%; font-size: 15px; }
.sky-star-two { right: 10%; top: 15%; font-size: 11px; animation-delay: -.8s; }
.sky-star-three { left: 18%; top: 36%; font-size: 9px; animation-delay: -1.5s; }
.sky-star-four { right: 20%; top: 40%; font-size: 14px; animation-delay: -.3s; }

.moon-glow {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 7%;
  top: 8%;
  border: 1px solid rgba(246, 212, 123, .22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 212, 123, .1), transparent 67%);
}

@keyframes star-twinkle {
  to {
    opacity: .35;
    transform: scale(.72);
  }
}

.lesson-copy {
  position: relative;
  z-index: 1;
}

.lesson-kicker {
  margin: 0 0 5px;
  color: var(--mint);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.lesson-copy h2 {
  margin: 0;
  font: 800 clamp(1.7rem, 4vw, 2.55rem) "Baloo 2";
}

.lesson-copy > p:last-child {
  margin: 6px 0 0;
  color: var(--muted);
}

.melody-progress {
  min-height: 38px;
  margin: 24px 0 18px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
}

.melody-note {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(203, 186, 245, .25);
  border-radius: 50%;
  color: #8f8ba3;
  background: rgba(34, 42, 76, .75);
  font-size: .72rem;
  font-weight: 900;
  transition: transform .18s, color .18s, border-color .18s, box-shadow .18s;
}

.melody-note.current {
  border-color: var(--gold);
  color: #201a2f;
  background: var(--gold);
  box-shadow: 0 0 22px rgba(246, 212, 123, .45);
  transform: scale(1.18);
}

.melody-note.done {
  border-color: var(--mint);
  color: #17342f;
  background: var(--mint);
}

.piano-wrap {
  width: min(780px, 100%);
  padding-top: 42px;
  position: relative;
  z-index: 2;
}

.guide-star {
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  color: #fff5bc;
  filter: drop-shadow(0 0 12px rgba(246, 212, 123, .9));
  font-size: 36px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: left .32s ease, transform .18s ease;
}

.guide-star.jump {
  transform: translateX(-50%) translateY(-10px) scale(1.2) rotate(12deg);
}

.piano {
  height: 225px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 8px solid #17172a;
  border-radius: 18px;
  background: #17172a;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .4);
}

.piano-key {
  min-width: 0;
  padding: 0 0 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border: 1px solid #bcb8c6;
  border-width: 0 1px 4px;
  border-radius: 0 0 9px 9px;
  color: #292638;
  background: linear-gradient(#fffdfa 0 72%, #e7e2e9 100%);
  box-shadow: inset 0 -10px 14px rgba(51, 45, 69, .08);
  cursor: pointer;
  transition: transform .08s, background .14s, box-shadow .14s;
}

.piano-key:hover {
  background: linear-gradient(#fffdf0, #eee5c9);
}

.piano-key.active,
.piano-key.guide {
  z-index: 2;
  color: #352514;
  background: linear-gradient(#fff7bd, #f1bf58);
  box-shadow:
    inset 0 -8px 12px rgba(140, 91, 29, .13),
    0 0 0 4px rgba(246, 212, 123, .24),
    0 0 30px rgba(246, 212, 123, .65);
}

.piano-key.active {
  transform: translateY(4px);
}

.piano-key.wrong {
  animation: gentle-wiggle .32s ease;
  background: linear-gradient(#f8e4ed, #d99ab0);
}

@keyframes gentle-wiggle {
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.key-note {
  font: 900 1.05rem "Baloo 2";
}

.key-shortcut {
  color: #888290;
  font-size: .58rem;
  font-weight: 900;
}

.black-key {
  width: 8.2%;
  height: 59%;
  position: absolute;
  top: 0;
  z-index: 4;
  border: 1px solid #06070d;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(90deg, #0a0c16, #25283a 55%, #070811);
  box-shadow: 0 8px 7px rgba(0, 0, 0, .38);
  pointer-events: none;
  transform: translateX(-50%);
}

.black-one { left: 12.5%; }
.black-two { left: 25%; }
.black-three { left: 50%; }
.black-four { left: 62.5%; }
.black-five { left: 75%; }

.piano-actions {
  margin-top: 24px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.listen-melody-button,
.restart-piano-button {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 99px;
  font-weight: 900;
  cursor: pointer;
}

.listen-melody-button {
  border: 1px solid rgba(105, 214, 196, .42);
  color: #cbfff4;
  background: rgba(39, 92, 88, .48);
}

.listen-melody-button:disabled {
  opacity: .48;
  cursor: default;
}

.restart-piano-button {
  border: 1px solid rgba(203, 186, 245, .25);
  color: var(--lavender);
  background: rgba(45, 52, 88, .65);
}

.piano-status {
  min-height: 24px;
  margin: 16px 0 0;
  position: relative;
  z-index: 2;
  color: var(--gold);
  font-weight: 900;
}

.piano-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  padding: 18px;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(7, 12, 29, .74);
  backdrop-filter: blur(8px);
}

.piano-overlay.hidden {
  display: none;
}

.piano-overlay-card {
  width: min(500px, 94%);
  padding: clamp(28px, 5vw, 45px);
  border: 1px solid rgba(203, 186, 245, .32);
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(155deg, rgba(31, 39, 73, .99), rgba(32, 23, 54, .99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.overlay-star {
  width: 82px;
  height: 82px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 212, 123, .45);
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle, rgba(246, 212, 123, .16), transparent 67%);
  box-shadow: 0 0 38px rgba(246, 212, 123, .17);
  font-size: 43px;
}

.piano-overlay-card h2 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.05;
}

.piano-overlay-card > p:not(.eyebrow) {
  margin: 0 0 23px;
  color: var(--muted);
  line-height: 1.58;
}

.piano-overlay-card strong {
  color: var(--lavender);
}

.piano-overlay-card small {
  display: block;
  margin-top: 18px;
  color: #8f8aa4;
}

@media (max-width: 650px) {
  .piano-game-shell {
    min-height: 650px;
    padding: 8px;
  }

  .piano-game-bar {
    grid-template-columns: 92px 1fr 92px;
    padding-inline: 4px;
  }

  .piano-stage {
    min-height: 555px;
    padding: 24px 10px 20px;
  }

  .piano-stat strong {
    font-size: 1.3rem;
  }

  .piano-wrap {
    padding-top: 38px;
  }

  .piano {
    height: 190px;
    border-width: 6px;
  }

  .piano-key {
    padding-bottom: 12px;
  }

  .black-key {
    width: 8.7%;
  }

  .guide-star {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .melody-progress {
    gap: 7px;
  }

  .melody-note {
    width: 27px;
    height: 27px;
    font-size: .65rem;
  }

  .piano-overlay {
    padding: 8px;
  }

  .piano-overlay-card {
    padding: 28px 19px;
  }
}

@media (max-width: 390px) {
  .piano-stage {
    padding-inline: 6px;
  }

  .piano {
    height: 172px;
  }

  .key-note {
    font-size: .9rem;
  }

  .key-shortcut {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky-star {
    animation: none;
  }

  .guide-star,
  .melody-note,
  .piano-key {
    transition: none;
  }
}