div.sq{
    background-size: 100% 100%;
    transform-origin: 50% 50%;
    transform: rotate(0);
}
#field div.sq{
    position: absolute;
    height: 25%;
    width: 12.5%;
}
div.sq[data-pos="0"],div.sq[data-pos="8"],div.sq[data-pos="16"],div.sq[data-pos="24"]{left: 0;}
div.sq[data-pos="1"],div.sq[data-pos="9"],div.sq[data-pos="17"],div.sq[data-pos="25"]{left: 12.5%;}
div.sq[data-pos="2"],div.sq[data-pos="10"],div.sq[data-pos="18"],div.sq[data-pos="26"]{left: 25%;}
div.sq[data-pos="3"],div.sq[data-pos="11"],div.sq[data-pos="19"],div.sq[data-pos="27"]{left: 37.5%;}
div.sq[data-pos="4"],div.sq[data-pos="12"],div.sq[data-pos="20"],div.sq[data-pos="28"]{left: 50%;}
div.sq[data-pos="5"],div.sq[data-pos="13"],div.sq[data-pos="21"],div.sq[data-pos="29"]{left: 62.5%;}
div.sq[data-pos="6"],div.sq[data-pos="14"],div.sq[data-pos="22"],div.sq[data-pos="30"]{left: 75%;}
div.sq[data-pos="7"],div.sq[data-pos="15"],div.sq[data-pos="23"],div.sq[data-pos="31"]{left: 87.5%;}
div.sq[data-pos="0"],div.sq[data-pos="1"],div.sq[data-pos="2"],div.sq[data-pos="3"],div.sq[data-pos="4"],div.sq[data-pos="5"],div.sq[data-pos="6"],div.sq[data-pos="7"]{top: 0;}
div.sq[data-pos="8"],div.sq[data-pos="9"],div.sq[data-pos="10"],div.sq[data-pos="11"],div.sq[data-pos="12"],div.sq[data-pos="13"],div.sq[data-pos="14"],div.sq[data-pos="15"]{top: 25%;}
div.sq[data-pos="16"],div.sq[data-pos="17"],div.sq[data-pos="18"],div.sq[data-pos="19"],div.sq[data-pos="20"],div.sq[data-pos="21"],div.sq[data-pos="22"],div.sq[data-pos="23"]{top: 50%;}
div.sq[data-pos="24"],div.sq[data-pos="25"],div.sq[data-pos="26"],div.sq[data-pos="27"],div.sq[data-pos="28"],div.sq[data-pos="29"],div.sq[data-pos="30"],div.sq[data-pos="31"]{top: 75%;}
div.sq[data-ori="1"]{transform:rotate(270deg);}div.sq[data-ori="2"]{transform:rotate(180deg);}div.sq[data-ori="3"]{transform:rotate(90deg);}
#phand div.sq{
    position: static;
    transform: rotate(90deg);
    height: 25%;
    width: 100%;
}
#pdraw div.sq{
    position: static;
    transform: rotate(90deg);
    height: 100%;
    width: 100%;
}
#pdraw[data-mov="0"]{left: 52.96875%;}
#pdraw[data-mov="1"]{left: 27.65625%;}
#draw1[data-mov="0"]{bottom: 69.75%;}
#draw1[data-mov="1"]{bottom: 47.25%;}
#draw2[data-mov="0"]{right: 42.984375%;}
#draw2[data-mov="1"]{right: 30.328125%;}
#draw3[data-mov="0"]{top: 59.75%;}
#draw3[data-mov="1"]{top: 37.25%;}
div.ohand div.sq{
    position: static;
    transform: rotate(90deg);
    height: 25%;
    width: 100%;
}
div.odraw div.sq{
    position: static;
    height: 100%;
    width: 100%;
}
#pfulu div.sq, div.ofulu div.sq{
    position: static;
    transform: rotate(90deg);
    height: 20%;
    width: 100%;
}
#pfulu div.sq[data-ori="1"]{transform:rotate(0);}#pfulu div.sq[data-ori="2"]{transform:rotate(270deg);}#pfulu div.sq[data-ori="3"]{transform:rotate(180deg);}
#fulu1 div.sq[data-ori="0"]{transform:rotate(180deg);}#fulu1 div.sq[data-ori="2"]{transform:rotate(0);}#fulu1 div.sq[data-ori="3"]{transform:rotate(270deg);}
#fulu2 div.sq[data-ori="0"]{transform:rotate(270deg);}#fulu2 div.sq[data-ori="1"]{transform:rotate(180deg);}#fulu2 div.sq[data-ori="3"]{transform:rotate(0);}
#fulu3 div.sq[data-ori="0"]{transform:rotate(0);}#fulu3 div.sq[data-ori="1"]{transform:rotate(270deg);}#fulu3 div.sq[data-ori="2"]{transform:rotate(180deg);}
#phand div.sq:hover, #pdraw div.sq:hover{filter: brightness(1.25) drop-shadow(0 0 0.001rem #fff);}
div.sq{background-image: none;} /* use -2 to represent empty */
div.sq[data-val="-1"]{background-image: url("../images/pc.svg");}
div.sq[data-val="0"]{background-image: url("../images/00.svg");}
div.sq[data-val="1"]{background-image: url("../images/01.svg");}
div.sq[data-val="2"]{background-image: url("../images/02.svg");}
div.sq[data-val="3"]{background-image: url("../images/03.svg");}
div.sq[data-val="4"]{background-image: url("../images/04.svg");}
div.sq[data-val="5"]{background-image: url("../images/05.svg");}
div.sq[data-val="6"]{background-image: url("../images/06.svg");}
div.sq[data-val="6"][data-dark="1"]{background-image: url("../images/06dark.svg");}
div.sq[data-val="10"]{background-image: url("../images/10.svg");}
div.sq[data-val="11"]{background-image: url("../images/11.svg");}
div.sq[data-val="12"]{background-image: url("../images/12.svg");}
div.sq[data-val="13"]{background-image: url("../images/13.svg");}
div.sq[data-val="14"]{background-image: url("../images/14.svg");}
div.sq[data-val="15"]{background-image: url("../images/15.svg");}
div.sq[data-val="16"]{background-image: url("../images/16.svg");}
div.sq[data-val="16"][data-dark="1"]{background-image: url("../images/16dark.svg");}