.attacks button:not(.block){
  border-width:2px;
  font-family:var(--display);
  transition:transform 60ms ease,background-color 60ms ease,box-shadow 60ms ease;
}
.attacks [data-key="hp"]{--pad-color:#4fc879}
.attacks [data-key="lp"]{--pad-color:#e45c62}
.attacks [data-key="hk"]{--pad-color:#5ca7e8}
.attacks [data-key="lk"]{--pad-color:#e5be50}
.attacks button:not(.block){border-color:color-mix(in srgb,var(--pad-color) 65%,white 12%);box-shadow:inset 0 0 18px #ffffff0d,0 0 0 1px #0008,0 3px 9px #000a}
.attacks button:not(.block) b{font-size:28px;line-height:.9;color:var(--pad-color);text-shadow:0 2px 4px #000}
.attacks button:not(.block).down{
  background:var(--pad-color);
  color:#080a0c;
  border-color:#fff;
  box-shadow:0 0 0 3px #ffffff35,0 0 18px var(--pad-color);
  transform:scale(.91);
}
.attacks button:not(.block).down b{color:#080a0c;text-shadow:none}
#controlLegend{
  position:absolute;
  right:max(18px,env(safe-area-inset-right));
  bottom:145px;
  width:190px;
  color:#e8e3d8;
  background:#080b10a8;
  border:1px solid #ffffff18;
  border-radius:5px;
  padding:4px 7px;
  font:9px/1.35 Arial,sans-serif;
  letter-spacing:.65px;
  text-align:center;
  pointer-events:none;
  text-shadow:0 1px 3px #000;
}
@media(max-height:520px) and (orientation:landscape){
  .controls button{width:52px;height:52px}
  .movement,.attacks{grid-template-columns:repeat(3,52px)}
  .attacks button:not(.block) b{font-size:25px}
  #controlLegend{right:max(16px,env(safe-area-inset-right));bottom:125px;width:166px;font-size:8px}
}
@media(max-width:650px) and (orientation:portrait){
  .controls button{width:47px;height:47px}
  .movement,.attacks{grid-template-columns:repeat(3,47px)}
  .attacks button:not(.block) b{font-size:22px}
  #controlLegend{right:max(8px,env(safe-area-inset-right));bottom:188px;width:149px;font-size:7px;padding:3px}
  #inputHistory{bottom:225px}
}
@media(prefers-reduced-motion:reduce){
  .attacks button:not(.block){transition:none}
}