/* Hands under the keyboard: layout, and the coloured finger images (assets/hands/*.png) */
:root {
  --hl:#86d0a6;
}

@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --hl:#6fbf92;
  }
}

:root[data-theme="dark"] {
  --hl:#6fbf92;
}

.hands2 {
  display:flex;
  justify-content:center;
  gap:0;
}

.hand {
  position:relative;
  height:100%;
  aspect-ratio:1/1;
}

.hand.mir {
  transform:scaleX(-1);
}

.hfill,.hink,.hfg {
  position:absolute;
  inset:0;
}

.hfill {
  background:var(--card);
}

.hink {
  background:var(--ink);
}

.hfg {
  background:none;
  opacity:0;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.hfg.on {
  opacity:.95;
}

.hfg.sh {
  opacity:.6;
}

#hi .hfg {
  opacity:.65;
}

.hfg.mk0.f0.on,.hfg.mk0.f0.sh,#hi .hfg.mk0.f0 {
  background-image:url(../assets/hands/finger-mk0-f0.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk1.f1.on,.hfg.mk1.f1.sh,#hi .hfg.mk1.f1 {
  background-image:url(../assets/hands/finger-mk1-f1.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk2.f2.on,.hfg.mk2.f2.sh,#hi .hfg.mk2.f2 {
  background-image:url(../assets/hands/finger-mk2-f2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk3.f3.on,.hfg.mk3.f3.sh,#hi .hfg.mk3.f3 {
  background-image:url(../assets/hands/finger-mk3-f3.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk4.f8.on,.hfg.mk4.f8.sh,#hi .hfg.mk4.f8 {
  background-image:url(../assets/hands/finger-mk4-f8.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk0.f7.on,.hfg.mk0.f7.sh,#hi .hfg.mk0.f7 {
  background-image:url(../assets/hands/finger-mk0-f7.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk1.f6.on,.hfg.mk1.f6.sh,#hi .hfg.mk1.f6 {
  background-image:url(../assets/hands/finger-mk1-f6.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk2.f5.on,.hfg.mk2.f5.sh,#hi .hfg.mk2.f5 {
  background-image:url(../assets/hands/finger-mk2-f5.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.mk3.f4.on,.hfg.mk3.f4.sh,#hi .hfg.mk3.f4 {
  background-image:url(../assets/hands/finger-mk3-f4.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
}

.hfg.fg.on,.hfg.fg.sh {
  filter:none;
}

.hfg.fg.on {
  opacity:.95;
}

.hfg.fg.sh {
  opacity:.6;
}

#hs {
  height:clamp(90px,18vh,170px)!important;
  width:auto!important;
}

#hi {
  height:210px;
  width:auto;
}

#pbar select {
  width:auto;
  max-width:130px;
}

@media(max-width:700px) {
  body.playing {
    overflow:auto;
  }
  #app.play {
    height:auto;
    min-height:100dvh;
  }
  #app.play #text {
    min-height:110px;
  }
  #pbar button,#pbar select {
    font-size:12px;
    padding:6px 8px;
  }
  #pl {
    display:none;
  }
  #hs {
    height:90px!important;
  }
  #app.play .k {
    height:34px;
  }
}