/*、

    game-cell game-value conflict
     */
 .game-wrapper {
    position: relative;
    width: 470px;
    max-width: 500px;
     margin: auto;
    /* background-color: #f3f6fa */
}

@media screen and (max-width: 800px) {
    .portrait .game-wrapper {
        max-width:none
    }
}

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

#g_h { display: flex; flex-wrap:nowrap; flex-direction: row;height: 24px; width: 100%; padding-left: 24px; } /* background-color: #a5dc86; */
#g_h .g_h_item { flex: 1 }
#g_h .g_h_item  div { text-align: center; cursor: pointer; }
#g_h .g_h_item div svg {}
#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 ; padding-top: 15px; text-align: center;}




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

.game-wrapper .game {
    position: absolute;
    top: 24px;
    right: 0;
    bottom: 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: 100%;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    border: 2px solid #344861
}

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

.game-table:after {
    content: "";
    position: absolute;
    left: 33.3333%;
    width: 33.3333%;
    top: 0;
    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: 33.3333%;
    height: 33.3333%;
    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: 10.574%; */
    height: 11.11111%;
}

.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.1111%;
    -ms-flex-preferred-size: 11.1111%;
    flex-basis: 11.1111%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    border-right: 1px solid #bec6d4;
    border-bottom: 1px solid #bec6d4;
    cursor: pointer;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(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
}

.filled-animation {
    -webkit-animation: filledGrid .3s cubic-bezier(0,.5,1,.5);
    -moz-animation: filledGrid .3s cubic-bezier(0,.5,1,.5);
    -o-animation: filledGrid .3s cubic-bezier(0,.5,1,.5);
    animation: filledGrid .3s cubic-bezier(0,.5,1,.5)
}

.filled-animation-long {
    -webkit-animation: filledGrid .4s cubic-bezier(0,.5,1,.5);
    -moz-animation: filledGrid .4s cubic-bezier(0,.5,1,.5);
    -o-animation: filledGrid .4s cubic-bezier(0,.5,1,.5);
    animation: filledGrid .4s cubic-bezier(0,.5,1,.5)
}

.cell-value {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    font-weight: 100;
    color: #666;
    text-align: center
}

.cell-value svg {
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    height: 50%
    */
    height: 50%; width: 100%;
}

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

.cell-value svg path {
    fill: #4a90e2
}

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

.gv .cell-value {
    font-weight: 700;
    color: #ed5565;
    cursor: default
}

.gv .cell-value svg path {
    fill: #ed5565;
}

.pencil-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0
}

.pencil-grid-cell {
    position: relative;
    width: 33.3333%;
    height: 33.3333%;
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
    color: #aaa
}

.pencil-grid-cell svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 120%;
    -webkit-transform: translate(-50%,-50%) scale(.45);
    -moz-transform: translate(-50%,-50%) scale(.45);
    -ms-transform: translate(-50%,-50%) scale(.45);
    -o-transform: translate(-50%,-50%) scale(.45);
    transform: translate(-50%,-50%) scale(.45)
}

.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;}

/* gv = give value */
/* iv = input value */
.gv {}
.gv .cell-value { font-weight: 700;color: #ed5565;cursor: default}
.gv .cell-value svg path {fill: #ed5565;}

.iv {}
.iv_0 {}
.iv_1 { font-size: x-large;font-weight: bolder;}
.iv_1 svg {height: 50%; width: 100%;}
.iv_2 { font-size: large; font-weight: bolder;}
.iv_2 svg { float: left; height: 35%; width: 38%;}
.iv_3 { font-size: medium;font-weight: bolder;}
.iv_3 svg { float: left; height: 32%; width: 33.33%;}
.iv_4 { font-size: small;font-weight: bolder;}
.iv_4 svg { float: left; height: 30%; width: 25%; }
.iv_5 { font-size: x-small;font-weight: bolder;}
.iv_5 svg { float: left; height: 28%; width: 20%;  margin-bottom: 3px;}