/* Create By Asking: the virtual piano on projects/virtual-piano.html.
   Loaded after style.css, tools.css and advanced.css; reuses .adv-shell, .chip-dark, .icon-btn and .adv-* helpers. */

.pn { gap: 16px; }
.pn-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.pn-top .adv-range input { width: 110px; }
.pn-oct { display: flex; align-items: center; gap: 8px; }
.pn-oct strong { font: 800 1.2rem/1 var(--display); color: #fff; min-width: 2em; text-align: center; }
.pn-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: -4px; }
.pn-pedal { border: 0; cursor: pointer; border-radius: 999px; padding: 9px 16px; background: rgba(255, 255, 255, 0.08); color: #CBBFE8; font: 600 var(--step--1)/1 var(--body); touch-action: none; user-select: none; -webkit-user-select: none; }
.pn-pedal kbd { font: 600 0.7rem/1 var(--mono); background: rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 2px 6px; color: #fff; margin-left: 6px; }
.pn-pedal[aria-pressed="true"] { background: #FF2E7E; color: #fff; }
.pn-pedal[aria-pressed="true"] kbd { background: rgba(0, 0, 0, 0.2); }

/* ---------- the keys ---------- */
.pn-board { background: linear-gradient(#120A2C, #0B0620); border-radius: 14px; padding: 10px 10px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pn-keys { position: relative; display: flex; height: clamp(170px, 21vw, 230px); border-top: 4px solid #FF2E7E; border-radius: 3px 3px 8px 8px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none; }
.pn-keys:focus-visible { box-shadow: 0 0 0 2px #FFC93C; }
.pn-key { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; padding-bottom: 10px; cursor: pointer; }
.pn-white { flex: 1 1 0; min-width: 0; background: linear-gradient(#F2EEE6, #FFFDF8 70%, #F4EFE6); border: 1px solid #C9C2B6; border-top: 0; border-radius: 0 0 6px 6px; box-shadow: inset 0 -6px 0 #E2DBCE, 0 2px 3px rgba(0, 0, 0, 0.35); color: #6B6280; transition: background 0.05s, box-shadow 0.05s; }
.pn-white + .pn-white, .pn-black + .pn-white { margin-left: -1px; }
.pn-black { position: absolute; top: 0; height: 62%; z-index: 2; padding-bottom: 8px; background: linear-gradient(#1D1A24, #2E2A38 85%, #3A3546); border-radius: 0 0 4px 4px; box-shadow: inset 0 -5px 0 #0E0C12, 0 3px 4px rgba(0, 0, 0, 0.45); color: #CBBFE8; }
.pn-white.down { background: linear-gradient(#E9E2D3, #FFE9A8 75%, #FFD86B); box-shadow: inset 0 -2px 0 #E0C77A, 0 1px 1px rgba(0, 0, 0, 0.3); }
.pn-black.down { background: linear-gradient(#2A2238, #6A4FA0 85%, #8A6BD0); box-shadow: inset 0 -2px 0 #0E0C12, 0 1px 2px rgba(0, 0, 0, 0.4); }
.pn-key span { pointer-events: none; font: 600 0.72rem/1 var(--mono); white-space: nowrap; }
.pn-black span { font-size: 0.62rem; }
.pn-kb { color: #9A90AE; }
.pn-black .pn-kb { color: #A597CC; }
.pn-note { display: none; }
.pn-white .pn-note { color: #4A3F66; }
.pn[data-labels="notes"] .pn-note { display: block; }
.pn[data-labels="notes"] .pn-kb, .pn[data-labels="off"] .pn-kb { display: none; }
.pn[data-labels="notes"] .pn-black .pn-note { display: none; }
.pn-kb:empty { display: none; }
/* learn a song: the key to play next glows and waits */
.pn-key.next::after { content: ""; position: absolute; left: 50%; bottom: 30px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #FF2E7E; box-shadow: 0 0 0 4px rgba(255, 46, 126, 0.25), 0 0 16px #FF2E7E; animation: pn-glow 1s ease-in-out infinite; }
.pn-black.next::after { bottom: 26px; width: 12px; height: 12px; margin-left: -6px; }
.pn-white.next { background: linear-gradient(#F2EEE6, #FFE3EE 70%, #FFD1E2); }
.pn-black.next { background: linear-gradient(#1D1A24, #7A2350 85%, #A12C66); }
@keyframes pn-glow { 50% { box-shadow: 0 0 0 8px rgba(255, 46, 126, 0.1), 0 0 22px #FF2E7E; } }
.pn-key.hit::before, .pn-key.miss::before { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: pn-flash 0.45s ease-out forwards; pointer-events: none; }
.pn-key.hit::before { background: rgba(91, 212, 143, 0.75); }
.pn-key.miss::before { background: rgba(255, 122, 98, 0.65); }
@keyframes pn-flash { to { opacity: 0; } }

/* ---------- learn and record panels ---------- */
.pn-panels { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.pn-panel { background: rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.pn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pn-select { background: rgba(255, 255, 255, 0.08); color: #fff; border: 0; border-radius: 999px; padding: 8px 12px; font: 600 var(--step--1)/1 var(--body); max-width: 100%; min-width: 0; flex: 1 1 180px; }
.pn-select option { background: #1C0F3F; }
.pn-panel .btn { padding: 8px 16px; }
.pn-panel .btn[aria-pressed="true"] { background: #FF2E7E; color: #fff; }
.pn-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pn-track span { display: block; height: 100%; width: 0; background: #5BD48F; border-radius: 99px; transition: width 0.2s; }
.pn-strip { display: flex; gap: 4px; overflow: hidden; font: 700 0.85rem/1 var(--mono); color: #A597CC; min-height: 28px; align-items: center; }
.pn-strip span { flex: none; min-width: 26px; padding: 6px 4px; text-align: center; border-radius: 6px; background: rgba(255, 255, 255, 0.05); }
.pn-strip span.done { color: #5BD48F; background: none; }
.pn-strip span.now { background: #FF2E7E; color: #fff; }
.pn-learn-out { margin: 0; font-size: var(--step--1); color: #CBBFE8; min-height: 1.4em; }
.pn-count { font: 600 0.75rem/1 var(--mono); color: #A597CC; margin-left: auto; }
.pn-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #FF2E7E; margin-right: 7px; vertical-align: -1px; }
.pn-rec[aria-pressed="true"] .pn-dot { background: #fff; animation: pn-blink 1s steps(2) infinite; }
@keyframes pn-blink { 50% { opacity: 0.2; } }
.pn-time { font: 600 0.78rem/1.3 var(--mono); color: #A597CC; margin: 0; }
.pn-time:empty, .pn .adv-msg:empty { display: none; }
.pn .adv-note kbd { font: 600 0.72rem/1 var(--mono); background: rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 2px 5px; color: #fff; }
.pn .adv-note b { color: #F2ECFF; }

@media (max-width: 760px) { .pn-panels { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pn-top { gap: 10px 14px; }
  .pn-board { padding: 6px 4px 8px; border-radius: 10px; }
  .pn-keys { height: 180px; }
  .pn-key { padding-bottom: 8px; }
  .pn-key span { font-size: 0.6rem; }
  .pn-black span { font-size: 0.5rem; }
  .pn-key.next::after { bottom: 24px; width: 12px; height: 12px; margin-left: -6px; }
  .pn-pedal { padding: 11px 18px; }
  .pn-panel { padding: 12px; }
  .pn-panel .pn-row { gap: 6px; }
  .pn-recrow { display: grid; grid-template-columns: 1fr 1fr; }
  .pn-recrow .btn { justify-content: center; }
  .pn-pedal kbd { display: none; }
}
@media (hover: none) { .pn [data-hover] { display: none; } }