/* HẢI VŨ PIANO ACADEMY — PIANO V24
   Realistic top-view keyboard + instant first-touch audio.
   This CSS intentionally overrides the older modeled key faces while
   preserving the exact 3-octave / 21-white / 15-black interaction geometry.
*/

.hvp2-piano-shell{
  padding:12px!important;
  border:1px solid rgba(216,224,228,.16)!important;
  border-radius:18px!important;
  background:
    linear-gradient(180deg,#1c252b 0%,#11191e 58%,#0d1418 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 26px rgba(12,25,33,.08)!important;
}

.hvp2-piano-scroll{
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  padding-bottom:0!important;
  border-radius:12px;
}

/*
  The generated source contains more than 3 octaves.
  We display the musically correct C–B crop:
  original crop approx x=385..1976, y=130..625.
  This aligns with the existing 21-white / 15-black hit map.
*/
.hvp2-piano{
  position:relative!important;
  min-width:980px!important;
  height:auto!important;
  aspect-ratio:1591 / 495;
  overflow:hidden!important;
  user-select:none;
  touch-action:none;
  border-radius:11px;
  background:#11191e!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.hvp24-art{
  position:absolute;
  z-index:0;
  left:-24.20%;
  top:-26.27%;
  width:131.87%;
  height:auto;
  max-width:none!important;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Exact playable key area inside the photographic crop. */
.hvp2-whites{
  position:absolute!important;
  z-index:2;
  left:0!important;
  right:0!important;
  top:9.7%!important;
  bottom:11.7%!important;
  display:flex!important;
}

/* Transparent hit areas: the visual comes from the top-view piano image. */
.hvp2-key.white{
  position:relative!important;
  flex:1 0 0!important;
  border:0!important;
  border-left:1px solid transparent!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.hvp2-key.black{
  position:absolute!important;
  z-index:4!important;
  top:9.7%!important;
  left:calc((var(--wi) * 100% / 21) - (100% / 21 * .31))!important;
  width:calc(100% / 21 * .62)!important;
  height:49.7%!important;
  border:0!important;
  border-radius:0 0 5px 5px!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* Subtle feedback: enough to feel responsive without returning to a modeled look. */
.hvp2-key.white.active{
  background:linear-gradient(
    180deg,
    rgba(84,151,184,.06) 0%,
    rgba(84,151,184,.16) 100%
  )!important;
  box-shadow:inset 0 0 0 2px rgba(91,155,187,.16)!important;
}
.hvp2-key.black.active{
  background:rgba(82,150,184,.20)!important;
  box-shadow:inset 0 0 0 2px rgba(146,198,222,.22)!important;
}

/* Keyboard focus remains accessible. */
.hvp2-key:focus-visible{
  outline:2px solid rgba(72,139,173,.72)!important;
  outline-offset:-3px;
}

/* Note labels float over the realistic keyboard only when requested. */
.hvp2-label{
  bottom:9px!important;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#385061!important;
  font-size:11px!important;
  line-height:1;
  box-shadow:0 1px 4px rgba(9,25,34,.08);
}
.hvp2-key.black .hvp2-label{
  bottom:8px!important;
  background:rgba(14,25,31,.80);
  color:#f3f6f7!important;
  font-size:9px!important;
}

/* Compact the first screen a little further without shrinking reading text. */
.hvp2-section{
  padding-top:24px!important;
}
.hvp2-toolbar{
  margin-bottom:12px!important;
}
.hvp2-diagnostic{
  margin-bottom:12px!important;
}
.hvp2-note-help{
  padding-top:28px!important;
}

@media (min-width:980px) and (max-height:920px){
  .hvp2-section{padding-top:18px!important}
  .hvp2-piano{min-width:940px!important}
}

@media(max-width:720px){
  .hvp2-piano-shell{padding:9px!important;border-radius:14px!important}
  .hvp2-piano{
    min-width:900px!important;
    border-radius:9px;
  }
}