/* =========================================================
   Mi Piano — teclado
   ---------------------------------------------------------
   Teclado dibujado en pantalla, anclado abajo.
   ========================================================= */
.kbbox{display:none}
body.showkb .kbbox{display:block}
/* touch-action:none — sin él, arrastrar el dedo por las teclas haría scroll
   en vez de glissando */
.kb{position:relative;height:96px;user-select:none;margin-top:2px;
  touch-action:none;cursor:pointer}
.wk{position:absolute;top:0;bottom:0;background:#fff;border:1px solid #cfc9bb;
  border-radius:0 0 5px 5px;box-shadow:inset 0 -7px 9px -8px rgba(0,0,0,.35)}
.bk{position:absolute;top:0;height:62%;background:#34343c;border-radius:0 0 4px 4px;z-index:3}
.wk.lit{background:#ffe9b8;border-color:var(--gold)}
.wk.dc{background:#fdeceb}
.wk.dc.lit{background:#ffdca8}
/* tecla pulsada por el niño: se hunde y se enciende */
.wk.toca{background:#ffe1a0;border-color:var(--gold);
  box-shadow:inset 0 -3px 6px -4px rgba(0,0,0,.5);transform:translateY(1px)}
.bk.toca{background:#8a6516}
.wk small{position:absolute;bottom:4px;left:0;right:0;text-align:center;
  font-size:.56rem;color:#a8a29a;pointer-events:none;line-height:1.25}
.wk.dc small{color:var(--red);font-weight:700}
.wk b.fg{display:block;font-size:.62rem}
.wk b.f-rh{color:var(--rh)} .wk b.f-lh{color:var(--lh)}
.kbnote{text-align:center;font-size:.74rem;color:var(--soft);margin:5px 0 0}
/* en pantalla completa sobra la explicación: solo teclas */
body.focus .kbnote{display:none}

/* En modo normal, el teclado se ancla abajo del todo, como en pantalla
   completa: siempre a la vista aunque se haga scroll. El reproductor y
   Chato suben para no quedar tapados. */
body.showkb:not(.focus) .kbbox{position:fixed;left:0;right:0;bottom:0;z-index:69;
  background:rgba(255,255,255,.97);border-top:1px solid var(--line);
  padding:8px 14px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,.1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
body.showkb:not(.focus) .audiobox{bottom:calc(146px + env(safe-area-inset-bottom))}
body.showkb:not(.focus) .dogbtn{bottom:calc(150px + env(safe-area-inset-bottom))}
body.showkb:not(.focus) .dogbubble{bottom:calc(220px + env(safe-area-inset-bottom))}
body.showkb:not(.focus) main{padding-bottom:250px}