#game {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        #sudoku {
    width: 100%;
    max-width: 450px;
    border: 0px solid #81acdc;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: auto;
}

#controls {
    max-width: 200px;
    flex-grow: 1;
    margin: 0 1rem;
    display: grid;
    align-content: space-between;
    grid-template-areas:
        "button"
        "numbers"
        "actions";
}

#new-game {
    width: calc(100% - 20px);
    height: 70px;
    border-radius: 15px;
    margin: 10px;
    box-shadow: #777 0 2px 3px;
    background: #d4e5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: button;
    color: #4f739c;
    font-size: 32px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    position: relative;
    transition: .1s box-shadow linear;
}

#numbers {
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(3,1fr);
    width: 100%;
    font-size: 35px;
    grid-area: numbers;
    color: #4f739c;
}

.number {
    width: 100%;
    /* aspect-ratio: 5/3; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #81acdc;
    border-radius: 5px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transition: .1s box-shadow linear;
}

#actions {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    grid-area: actions;
    margin: 10px 0;
}

#actions>div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #4e739c;
}

.cell-selected { background-color: #f3f9e2!important;}
.ps9 .iv_1 { color:blue;font-size: 36px!important; }
.ps9 .iv_2 { color: blue; font-size: 24px!important;}
.ps9 .iv_3 { color: blue; font-size: 22px!important;}
.ps9 .iv_4 { color: blue; font-size: 16px!important;}
.ps9 .iv_5 { color: blue; font-size: 14px!important;}

.ps8 .iv_1 { color:blue;font-size: 36px!important; }
.ps8 .iv_2 { color: blue; font-size: 24px!important;}
.ps8 .iv_3 { color: blue; font-size: 22px!important;}
.ps8 .iv_4 { color: blue; font-size: 16px!important;}
.ps8 .iv_5 { color: blue; font-size: 14px!important;}

.ps6 .iv_1 { color:blue;font-size: 46px!important; }
.ps6 .iv_2 { color: blue; font-size: 24px!important;}
.ps6 .iv_3 { color: blue; font-size: 22px!important;}
.ps6 .iv_4 { color: blue; font-size: 16px!important;}
.ps6 .iv_5 { color: blue; font-size: 14px!important;}

.ps4 .iv_1 { color:blue;font-size: 60px!important; }
.ps4 .iv_2 { color: blue; font-size: 34px!important;}
.ps4 .iv_3 { color: blue; font-size: 26px!important;}
.ps4 .iv_4 { color: blue; font-size: 16px!important;}
.ps4 .iv_5 { color: blue; font-size: 14px!important;}

.sgrid_cell { display: grid;grid-gap: 2px;grid-template-columns: repeat(3,1fr);}
.sgrid_cell > div {display: flex;align-items: center;justify-content: center; font-size: 12px; line-height:12px; height:12px; color:blue; }
.hide { display: none!important;}
.conflict_cell { background-color:red!important;}


.pzm_f0_box {
    flex-direction: column;
    align-content: center;
    background-color: #fff;
    border: solid 2px #000;
    box-shadow: inset 1px 1px 0 #e3e4e5;
    width: 450px;
    height: 450px;
    margin: auto;
    overflow: hidden;
}

.pzm_f0_box,.tr { display: flex;}
.pzm_f2_box,.tr { display: flex;}
.pzm_f4_box,.tr { display: flex;}

.tr {
    flex: 1;
    flex-direction: row;
}

.td {
    flex: 1;
    position: relative;
}


.border_0_,.border_0_0,.border__,.border__0 {
    box-shadow: inset -1px -1px 0 #ccc;
}

.border_0_1,.border__1 {
    box-shadow: inset 0 -2px 0 #000,inset -1px 0 0 #ccc;
}

.border_1_,.border_1_0 {
    box-shadow: inset -2px 0 0 #000,inset 0 -1px 0 #ccc;
}

.border_1_1 {
    box-shadow: inset -2px -2px 0 #000;
}

/* killer jigsaw */
.kj_border_0_,.kj_border_0_0,.kj_border__,.kj_border__0 {
    box-shadow: inset -1px -1px 0 #ccc;
}

.kj_border_0_1,.kj_border__1 {
    box-shadow: inset 0 -2px 0 #ed5565,inset -1px 0 0 #ccc;
}

.kj_border_1_,.kj_border_1_0 {
    box-shadow: inset -2px 0 0 #ed5565,inset 0 -1px 0 #ccc;
}

.kj_border_1_1 {
    box-shadow: inset -2px -2px 0 #ed5565;
}
/* killer jigsaw end */

.x_sdk {
    z-index: 999;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="lightgray" stroke-width="1"/><line x1="0" y1="100%" x2="100%" y2="0" stroke="lightgray" stroke-width="1"/></svg>');
}

.atix_sdk {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="coral" stroke-dasharray="8,8" stroke-width="1"/><line x1="0" y1="100%" x2="100%" y2="0" stroke="coral" stroke-dasharray="8,8" stroke-width="1"/></svg>');
}

.c_bg {
    background-color: #cdedf6;
}

/* https://www.yzktw.com.cn/post/819740.html */
.out_txt { writing-mode: vertical-lr; /* transform: rotate(-90deg);transform-origin: center center;*/ }

.num-cell4 {
    font-family: "myFont";
    line-height: 110px;
    font-size: 60px;
    height: 110px;
    max-width: 110px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
    width: 97%; width: 97%;
}

.num-cell6 {
    font-family: "myFont";
    line-height: 74px;
    font-size: 46px;
    height: 74px;
    max-width: 74px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
    width: 97%; width: 97%;
}

.num-cell8 {
    font-family: "myFont";
    line-height: 54px;
    font-size: 38px;
    height: 54px;
    max-width: 54px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
}

.num-cell9 {
    font-family: "myFont";
    line-height: 48px;
    font-size: 36px;
    height: 48px;
    max-width: 48px;
    text-align: center;
    overflow: hidden;
    word-break: keep-all;
}


/** killer **/
.k_cell-item-on_vh4 { background-color: #ffffcc; opacity: 0.9; word-break: keep-all;}
.k_cell-item-on_vh6 { background-color: #ffffcc; opacity: 0.9; word-break: keep-all;}
.k_cell-item-on_vh8 { background-color: #ffffcc; opacity: 0.9;  word-break: keep-all;}
.k_cell-item-on_vh9 { background-color: #ffffcc; opacity: 0.9;  word-break: keep-all;}

.k_cell_grid_4 {
    margin-top: 32rpx;
    flex-direction: column;
    align-content: center;
  }

.k_cell_grid_6 {
    margin-top: 18rpx;
    flex-direction: column;
    align-content: center;
  }

.k_cell_grid_8, .k_cell_grid_9 {
    margin-top: 14px;
    flex-direction: column;
    align-content: center;
  }

.k_cg_tr {
    display: flex;
    flex: 1;
    flex-direction: row;
}

.k_cg_item4 {
    width: 50%;
    font-size: 38rpx;
    line-height: 54rpx;
    height: 68rpx;
    border: 0 solid transparent;
    text-align: center;
    color:blue
  }

  .k_cg_item6 {
    width: 33%;
    font-size: 38rpx;
    line-height: 46rpx;
    height: 46rpx;
    border: 0 solid transparent;
    text-align: center;
    color:blue
  }

  .k_cg_item8, .k_cg_item9  {
    width: 33%;
    font-size: 20px;
    line-height: 20px;
    height: 20px;
    border: 0 solid transparent;
    text-align: center;
    color:blue
  }

/*  max-height:48px; */
.ps9 input { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 36px; overflow:hidden; background-color: transparent; max-height:48px; }
.ps9 .s2 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:48px; }
.ps9 .s3 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 14px!important;  overflow:hidden; background-color: transparent; max-height:48px; }
.ps8 input { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 38px; overflow:hidden; background-color: transparent; max-height:54px; }
.ps8 .s2 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:54px; }
.ps8 .s3 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 12px!important; overflow:hidden; background-color: transparent; max-height:54px; }
.ps6 input { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 46px; overflow:hidden; background-color: transparent; max-height:75px; }
.ps6 .s2 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 26px!important; overflow:hidden; background-color: transparent; max-height:75px; }
.ps6 .s3 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:75px; }
.ps4 input { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 60px; height: 110px; max-width: 110px; text-align: center; }
.ps4 .s2 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 40px!important; height: 110px; max-width: 110px; text-align: center; }
.ps4 .s3 { width:96%; height:96%; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 30px!important; height: 110px; max-width: 110px; text-align: center; }
.conflict { color: red!important;}

.kps9 input { width:96%; height:96%;position:absolute; z-index:20;border:solid 1px transparent; text-align:center; color:blue; font-size: 36px; overflow:hidden; background-color: transparent; max-height:48px; }
.kps9 .s2 { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:48px; }
.kps9 .s3 { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; font-size: 14px!important;  overflow:hidden; background-color: transparent; max-height:48px; }
.kps8 input { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; font-size: 38px; overflow:hidden; background-color: transparent; max-height:54px; }
.kps8 .s2 { width:96%; height:96%;position:absolute; z-index:20;  border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:54px; }
.kps8 .s3 { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; font-size: 12px!important; overflow:hidden; background-color: transparent; max-height:54px; }
.kps6 input { width:96%; height:96%;position:absolute; z-index:20;  border:solid 1px transparent; text-align:center; color:blue; font-size: 46px; overflow:hidden; background-color: transparent; max-height:75px; }
.kps6 .s2 { width:96%; height:96%;position:absolute; z-index:20;  border:solid 1px transparent; text-align:center; color:blue; font-size: 26px!important; overflow:hidden; background-color: transparent; max-height:75px; }
.kps6 .s3 { width:96%; height:96%;position:absolute; z-index:20;  border:solid 1px transparent; text-align:center; color:blue; font-size: 22px!important; overflow:hidden; background-color: transparent; max-height:75px; }
.kps4 input { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 60px; height: 110px; max-width: 110px; text-align: center; }
.kps4 .s2 { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 40px!important; height: 110px; max-width: 110px; text-align: center; }
.kps4 .s3 { width:96%; height:96%; position:absolute; z-index:20; border:solid 1px transparent; text-align:center; color:blue; overflow:hidden; background-color: transparent; line-height: 110px; font-size: 30px!important; height: 110px; max-width: 110px; text-align: center; }
.conflict { color: red!important;}

.ft_txt { font-size: 16px }
.fb_txt { font-size: 16px}
.fl_txt { font-size: 16px}
.fr_txt { font-size: 16px; }

/* killer 9x9 */

.cell_box_9 { position: relative; width: 100%; height: 100%}
.box_sum_9 { position: absolute; z-index:11; top: 0; left: 6px; border-radius: 8px; font-weight: bold; font-family: "myFont"; width: 16px; height: 15px;line-height: 15px; font-size: 14px; text-align: center;  background-color: #fff; }

.box_1111_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1111.png"); background-position: center; background-size: cover; }
.box_0000_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/0000.png"); background-position: center; background-size: cover;}

.box_1110_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_1101_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover;}
.box_1011_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(-90deg);}
.box_0111_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(180deg);}

.box_1100_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;}
.box_1001_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(-90deg);}
.box_0011_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(180deg);}
.box_0101_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_0110_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%;  background-image:url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_1010_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;}

.box_1000_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;}
.box_0100_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_0010_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(180deg);}
.box_0001_9 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;  transform: rotate(-90deg);}

/* killer 6x6 */
.cell_box_6 { position: relative; width: 100%; height: 100%}
.box_sum_6 { position: absolute; z-index:11; top: 0; left: 6px; border-radius: 8px; font-weight: bold; font-family: "myFont"; width: 30px; height: 30px;line-height: 24px; font-size: 24px; text-align: center;  background-color: #fff; }

.box_1111_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1111.png"); background-position: center; background-size: cover; }
.box_0000_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/0000.png"); background-position: center; background-size: cover;}

.box_1110_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_1101_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover;}
.box_1011_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(-90deg);}
.box_0111_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(180deg);}

.box_1100_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;}
.box_1001_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(-90deg);}
.box_0011_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(180deg);}
.box_0101_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_0110_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_1010_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;}

.box_1000_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;}
.box_0100_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_0010_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(180deg);}
.box_0001_6 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;  transform: rotate(-90deg);}

/* killer 4x4 */
.cell_box_4 { position: relative; width: 100%; height: 100%}
.box_sum_4 { position: absolute; z-index:11; top: 0; left: 8px; border-radius: 8px;  font-weight: bold; font-family: "myFont"; width: 30px; height: 30px;line-height: 30px; font-size: 30px; text-align: center;  background-color: #fff; }

.box_1111_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1111.png"); background-position: center; background-size: cover; }
.box_0000_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/0000.png"); background-position: center; background-size: cover;}

.box_1110_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_1101_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover;}
.box_1011_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(-90deg);}
.box_0111_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1101.png"); background-position: center; background-size: cover; transform: rotate(180deg);}

.box_1100_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;}
.box_1001_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(-90deg);}
.box_0011_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(180deg);}
.box_0101_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_0110_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%;  background-image:url("/static/img/kc/1100.png"); background-position: center; background-size: cover;transform: rotate(90deg);}
.box_1010_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1010.png"); background-position: center; background-size: cover;}

.box_1000_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;}
.box_0100_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(90deg);}
.box_0010_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover; transform: rotate(180deg);}
.box_0001_4 { position: absolute; z-index: 10; top: 0; left: 0; width: 99%; height: 99%; background-image: url("/static/img/kc/1000.png"); background-position: center; background-size: cover;  transform: rotate(-90deg);}

/* end killer 4x4 */


/* share jigsaw box */
.killer_flex_box {
    display: block;
    height: unset;
}

.killer_box {
    flex-direction: column;
    align-content: center;
    background-color: #fff;
    border: solid 2px #000;
    box-shadow: inset 1px 1px 0 #e3e4e5;
    width: 450px;
    height: 450px;
    margin: auto;
    overflow: hidden;
}

.killer_box,.tr {
    display: flex;
}

.k_border_0__n, .k_border_0__j,.k_border_0_0_j, .k_border_0_0_n,.k_border___n, .k_border___j,.k_border__0_n, .k_border__0_j {
    box-shadow: inset -2px -2px 0 #ccc;
}

.k_border_0_1_n, .k_border__1_n {
    box-shadow: inset 0 -4px 0 #000,inset -2px 0 0 #ccc;
}
/* orangered */
.k_border_0_1_j, .k_border__1_j {
    box-shadow: inset 0 -4px 0 #FF7573,inset -2px 0 0 #ccc;
}

.k_border_1__n,.k_border_1_0_n {
    box-shadow: inset -4px 0 0 #000,inset 0 -2px 0 #ccc;
}
.k_border_1__j, .k_border_1_0_j {
    box-shadow: inset -5px 0 0 #FF7573,inset 0 -2px 0 #ccc;
}

.k_border_1_1_n {
    box-shadow: inset -4px -4px 0 #000;
}
.k_border_1_1_j {
    box-shadow: inset -5px -5px 0 #FF7573;
}

/*
border_0_1_xxx and tr , td share jigsaw
*/
/** end killer **/
/* consecutive-sudoku #ffffaa*/
.cs_h9 {position: absolute; z-index: 1000; top: 10px; left: -3px; height: 30px; width: 4px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}
.cs_v9 {position: absolute; z-index: 1000; top: -3px; left: 10px; height: 4px; width: 30px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}
/* consecutive-sudoku 注意6x6的h是right */
.cs_h6 {position: absolute; z-index: 1000; top: 20px; right: -2px; height: 30px; width: 4px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}
.cs_v6 {position: absolute; z-index: 1000; top: -3px; left: 20px; height: 4px; width: 30px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}

.cs_h4 {position: absolute; z-index: 1000; top: 34px; left: -3px; height: 40px; width: 4px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}
.cs_v4 {position: absolute; z-index: 1000; top: -3px; left: 34px; height: 4px; width: 40px; border-radius: 2px; border: solid 1px red; background-color: #f76707;}

/* outside */
.fvl_outside9x9 { font-size: 24rpx;}
.fvr_outside9x9 { font-size: 24rpx;}
.fht_outside9x9 { font-size: 24rpx; line-height: 40rpx;}
.fhb_outside9x9 { font-size: 24rpx;}

/* vx-sudoku */
.vx_h {position: absolute; z-index: 1000; top: 20px; right: -6px; height: 12px; width: 12px; }
.vx_v {position: absolute; z-index: 1000; bottom:-6px; left: 20px; height: 12px; width: 12px; }
.vx_imgv { background-image: url("/static/img/vx/v.png"); background-repeat: no-repeat; background-position: center ; background-size: cover;  }
.vx_imgx { background-image: url("/static/img/vx/x.png"); background-repeat: no-repeat; background-position: center ; background-size: cover; }

/* kropki9x9 */
.kr_r9 {position: absolute; z-index: 1000; top: 20px; right: -5px; height: 10px; width: 10px; }
.kr_t9 {position: absolute; z-index: 1000; top:-5px; left: 20px; height: 10px; width: 10px; }
.kr_r6 {position: absolute; z-index: 1000; top: 30px; right: -5px; height: 10px; width: 10px; }
.kr_t6 {position: absolute; z-index: 1000; top:-5px; left: 30px; height: 10px; width: 10px; }
.kr_imgw { border: solid 1px black; background-color: #fff;  border-radius: 50%;}
.kr_imgb { border: solid 1px black; background-color: #000; border-radius: 50%;}

/* gtt t1< t2> l3 > l4 < */
.gt_9_1 { position: absolute; z-index: 1000; top:-6px; left: 15px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_9_2 { position: absolute; z-index: 1000; top:-6px; left: 15px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt2.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_9_3 { position: absolute; z-index: 1000; top: 15px; right: -6px; height: 10px; width: 10px;background-image: url('/static/img/gt/gt3.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_9_4 { position: absolute; z-index: 1000; top: 15px; right: -6px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt4.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
/* gtt t1< t2> l3 > l4 < */
.gt_6_1 { position: absolute; z-index: 1000; top:-9px; left: 25px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_6_2 { position: absolute; z-index: 1000; top:-9px; left: 25px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt2.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_6_3 { position: absolute; z-index: 1000; top: 25px; right: -9px; height: 15px; width: 15px;background-image: url('/static/img/gt/gt3.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.gt_6_4 { position: absolute; z-index: 1000; top: 25px; right: -9px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt4.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}

/* color gt 1> 2< 3v 4tvl> 5tvl<  6^ 7 t^l> 8 t^l< */
/* gt1.png ^ 6; gt2 v 3 ;gt3 > 1 ;gt4 < 2 */
.cgt_9_1 { position: absolute; z-index: 1000; top: 18px; left: -6px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt3.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_9_2 { position: absolute; z-index: 1000; top: 18px; left: -6px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt4.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_9_3 { position: absolute; z-index: 1000; top:-6px; left: 18px; height: 10px; width: 10px;background-image: url('/static/img/gt/gt2.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_9_6 { position: absolute; z-index: 1000; top:-6px; left: 18px; height: 10px; width: 10px; background-image: url('/static/img/gt/gt1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
/* color gt 1> 2< 3v 4tvl> 5tvl<  6^ 7 t^l> 8 t^l< */
/* gt1.png ^ 6; gt2 v 3 ;gt3 > 1 ;gt4 < 2 */
.cgt_6_1 { position: absolute; z-index: 1000; top: 25px; left: -9px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt3.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_6_2 { position: absolute; z-index: 1000; top: 25px; left: -9px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt4.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_6_3 { position: absolute; z-index: 1000; top:-9px; left: 25px; height: 15px; width: 15px;background-image: url('/static/img/gt/gt2.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_6_6 { position: absolute; z-index: 1000; top:-9px; left: 25px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_4_1 { position: absolute; z-index: 1000; top: 38px; left: -9px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt3.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_4_2 { position: absolute; z-index: 1000; top: 38px; left: -9px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt4.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_4_3 { position: absolute; z-index: 1000; top:-9px; left: 38px; height: 15px; width: 15px;background-image: url('/static/img/gt/gt2.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}
.cgt_4_6 { position: absolute; z-index: 1000; top:-9px; left: 38px; height: 15px; width: 15px; background-image: url('/static/img/gt/gt1.png'); background-position: center; background-size: cover; background-repeat: no-repeat;}

/** vsudoku **/
.vs_0 { color: #fff;}
.vs_1 { position: absolute; z-index: 200; top:-6px; left: -6px; height: 20px; width: 20px; background-image: url('/static/img/v/v1.png'); background-position: center; background-size: cover; background-repeat: no-repeat; }
.vs_2 { position: absolute; z-index: 200; top:-6px; right:-6px; height: 20px; width: 20px; background-image: url('/static/img/v/v2.png'); background-position: center; background-size: cover; background-repeat: no-repeat; }
.vs_3 { position: absolute; z-index: 200; bottom:-6px; right: -6px; height: 20px; width: 20px; background-image: url('/static/img/v/v3.png'); background-position: center; background-size: cover; background-repeat: no-repeat; }
.vs_4 { position: absolute; z-index: 200; bottom:-6px; left: -6px; height: 20px; width: 20px; background-image: url('/static/img/v/v4.png'); background-position: center; background-size: cover; background-repeat: no-repeat; }

/* evenodd9x9 */
.eo9_0 { width: 1px; height: 1px;}
.eo9_1 { position: absolute; z-index: 1; background-color: transparent; width: 34px; height: 34px; border-radius: 50%;  margin: 7px; border: solid 1px #ccc;}
.eo9_2 { position: absolute; z-index: 1; background-color: transparent; width: 34px; height: 34px; margin: 7px; border: solid 1px #ccc; }
.eo6_0 { width: 1px; height: 1px;}
.eo6_1 { position: absolute; z-index: 1; background-color: transparent; width: 42px; height: 42px; border-radius: 50%;  margin: 14px; border: solid 1px #ccc;}
.eo6_2 { position: absolute; z-index: 1; background-color: transparent; width: 42px; height: 42px; margin: 14px; border: solid 1px #ccc; }

/* 'little_killerx', 'little_killer_anti_knight', 'little_killer_anti_king', 'little_killer_jigsaw' little_killer_anti_kk */
.fht_lk { background-image: url('/static/img/lk/lk_ht.png');  background-position:left bottom; background-repeat: no-repeat; }
.fhb_lk { background-image: url('/static/img/lk/lk_hb.png');  background-position:right 2px; background-repeat: no-repeat; }
.fvl_lk { height:50px; line-height: 48px; background-image: url('/static/img/lk/lk_vl.png');  background-position:right bottom; background-repeat: no-repeat; }
.fvr_lk { height:50px; line-height: 48px;background-image: url('/static/img/lk/lk_vr.png');  background-position:left top; background-repeat: no-repeat; }

.fht_rossini{ height: 20px;}
.fhb_rossini {height: 20px;}
.fvl_rossini, .fvr_rossini { width: 20px;}

.frame_fl_txt { line-height: 50px;}
.frame_fr_txt { line-height: 50px;}
/* end puzzle main */