/*、

    game-cell game-value conflict
     */
#g_h { display: flex; flex-wrap:nowrap; flex-direction: row;height: 30px; width: 525px; padding-left: 24px; } /* background-color: #a5dc86; */
#g_h .g_h_item { flex: 1 }
#g_h .g_h_item  div { text-align: center; cursor: pointer; font-size: 26px; height: 30px; font-family: "sdkr", sans-serif;}
#g_h .g_h_item div:hover { background-color: #a5dc86; }

#g_v { display: flex; flex-wrap:nowrap; flex-direction: column;}
#g_v .g_v_item { flex: 1 ; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 150%;}

 .game-wrapper {
    position: relative;
    width: 100%;
    max-width: 525px;
     margin: auto;
    /* background-color: #f3f6fa */
}




/* 344861 -> fff */
@media screen and (max-width: 800px) {
    .portrait .game-wrapper {
        max-width:none
    }
}

.game-wrapper:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.mobile.landscape .game-wrapper {
    width: 60%
}

.game-wrapper .game {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    margin: 0;
    left: 24px;
}

.game-tip {
    display: none;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 15px 30px;
    background-color: #4a90e2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    line-height: 1.67;
    text-align: center;
    z-index: 1
}

@media screen and (max-width: 460px) {
    .game-tip {
        left:10px;
        right: 10px;
        bottom: 10px;
        padding: 10px
    }
}

.game-table {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    padding: 0;
    /* background: #fff; */
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    border: 3px solid #333
}

.game-table,.game-table:after {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.game-table:after {
    content: "";
    position: absolute;
    left: 11.111111%;
    width: 11.111111%;
    top: 0;
    /* xxx
    border-left: 2px solid #344861;
    border-right: 2px solid #344861;
    */
    pointer-events: none
}


.game-table tbody {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden
}


.game-table tbody:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 11.111111%;
    height: 11.111111%;
    /*
    border-top: 2px solid #344861;
    border-bottom: 2px solid #344861;
    */
    pointer-events: none
}


.game-row,.game-table tbody:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%
}

.game-row {
    height: 11.111111%
}

.game-cell,.game-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
    margin: 0
}

.game-cell {
    -webkit-flex-basis:11.112%;
    -ms-flex-preferred-size: 11.112%;
    flex-basis: 11.112%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*
    border-right: 1px solid #bec6d4;
    border-bottom: 1px solid #bec6d4; */
    cursor: pointer;
    position: relative;
}


.game-table .nr {  border-right: solid 1px #999;} /* width: 80px; height: 80px; */
.game-table .r {  border-right: solid 3px #555;}
.game-table .nb {  border-bottom: solid 1px #999;}
.game-table .b {  border-bottom: solid 3px #555;}
.game-table td { }
.game-table td label { white-space:nowrap; font-size: small ; position:absolute; top:-3px ; left: 0}


.game-cell:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.game-cell:hover {
    background-color: #def
}

/*
.game-cell:nth-child(3n) {
    border-right: 0
}

.game-cell:nth-child(3n+4) {
    border-left: 1px solid #bec6d4
}

.game-row:nth-child(3n) .game-cell {
    border-bottom: 0
}

.game-row:nth-child(3n+4) .game-cell {
    border-top: 1px solid #bec6d4
}
*/

.game-cell.highlight-table {
    background-color: #e2e7ed
}

.paused .game-cell.highlight-table {
    background-color: transparent
}

.game-cell.highlight-number {
    background-color: #cbdbed
}

.paused .game-cell.highlight-number {
    background-color: transparent
}

.game-cell.conflict {
    background-color: #f7cfd6
}

.game-cell.conflict:not(.gv) .cell-value svg path {
    fill: #fb3d3f
}

.paused .game-cell.conflict {
    background-color: transparent
}

.game-cell.mistake .cell-value svg path {
    fill: #fb3d3f
}

.game-cell.warning {
    background-color: #fff3cd
}

.game-cell.warning:not(.gv) .cell-value svg path {
    fill: #856404
}

.paused .game-cell.warning {
    background-color: transparent
}


.game-cell.cell-selected {
    background-color: #bbdefb
}

.paused .game-cell.cell-selected {
    background-color: transparent
}


.cell-value {
    width: 100%;
    height: 100%;
    font-weight: 200;
    color: #4a90e2;
    text-align: center;
    overflow: hidden;
    line-height: 52px;
}


/* gv = give value */
/* iv = input value */
.gv {}
.gv .cell-value { font-weight: 600;color: #ed5565;cursor: default;
    text-align: center; font-size: 36px; font-family: "sdkr", sans-serif}

.iv {}
.iv_0 {}
.iv_1 { font-size: 36px;font-family: "sdkw", sans-serif;}
.iv_2 { font-size: 28px;font-family: "sdkw", sans-serif; }
.iv_3 { font-size: 20px;font-family: "sdkw", sans-serif; }
.iv_4 { font-size: 16px;font-family: "sdkw", sans-serif; }
.iv_5 { font-size: 12px;font-family: "sdkw", sans-serif; }

/*
@media screen and (max-width: 800px) {
    .cell-value svg {
        height:60%
    }

    .gv .cell-value svg {
        height:60%
    }
}
    */




.paused .cell-value svg {
    opacity: 0
}




.pencil-grid-cell svg path {
    fill: #6e7c8c;
    stroke: #6e7c8c
}

#btn_tool_num svg {
    height:80%
}

#btn_tool_num .btn-circle.btn-lg { padding: 12px 12px!important;}

.btn_row_tb { width: 100%; }
.btn_row_tb td { width: 11.111111%; height: 45px;}

.btn_row_act_tb { width: 100%; }
.btn_row_act_tb td { width: 25%; height: 45px;}

.btn_row_box { max-width: 500px; margin: 5px auto;}
.btn_row_box .button { border:none!important;}