*{
    /* box-sizing: border-box; */
    box-sizing: content-box;
}
body{
    background-color: black;
    font-family: tahoma;
    font-size: 13px;
}
h1{
    text-align: center;
    color: #d6e0e4;
}
fuzzle-2d{
    width:400px;
    height:400px;
    padding:7px;
    border: 10px greenyellow solid;
    background-color: white;
}
fuzzle-2d::part(container prepare) {
    height: 100%;
    --s: 82px; /* control the size*/
    --c1: #b2b2b2;
    --c2: #ffffff;
    --c3: #d9d9d9;
    
    --_g: var(--c3) 0 120deg,#0000 0;
    background:
        conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
        conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
        conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
        conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
        linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
                            var(--c1) 0 calc(500%/6),var(--c2) 0);
    background-size: calc(1.732*var(--s)) var(--s);
}

#container {
    display: flex;
    flex-wrap: wrap;
    width: 668px;
    margin: auto;
}

.sidebar, .main {
    display: flex;
    flex-direction: column;
}
.sidebar > div{
    background-color: rgb(212, 212, 212);
}
#image-sample{
    border: 10px solid yellow;
    width: 200px; 
    height: 200px;
    padding: 5px;
    flex-grow:0;
    flex-shrink: 0;
    
}
#image-sample > div{
    background-size: 200px 200px;
    /* background-position: 5px 5px; */
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    font-size: calc(.6 * 200px);;
    line-height: 200px;
    height: 100%;
    width: 100%;
    background-color: rgb(114, 114, 114);
}
#image-sample > div[empty]{
    --s: 50px; /* control the size*/
    --c1: #808080;
    --c2: #c0c0c0;
    
    --_g: 
        var(--c2) 6%  14%,var(--c1) 16% 24%,var(--c2) 26% 34%,var(--c1) 36% 44%,
        var(--c2) 46% 54%,var(--c1) 56% 64%,var(--c2) 66% 74%,var(--c1) 76% 84%,var(--c2) 86% 94%;
    background:
        radial-gradient(100% 100% at 100% 0,var(--c1) 4%,var(--_g),#0008 96%,#0000),
        radial-gradient(100% 100% at 0 100%,#0000, #0008 4%,var(--_g),var(--c1) 96%)
        var(--c1);
    background-size: var(--s) var(--s);
}
#panel{
    border: 10px solid cyan;
    width: 200px; 
    /* height: 200px; */
    height : calc(100% - 200px);
    padding: 5px;
    /* background-color: rgb(114, 114, 114); */
}

#panel #score{
    display: flex;
    border: solid 5px red;
    background: red;
    color: white;
    padding: .2rem;
    margin-bottom: 5px;
}

#panel #score input{
    text-align: right;
    width: 100%;
    color: inherit;
}

#panel #setting{
    flex-direction: column;
}
#panel #setting > div{
    display: flex;
    margin: 3px;
    width: initial;
}

#panel #setting > div > :last-child{
    width: 65%;
}
#panel #setting > div > :first-child{
    width: 35%;
}

#panel #apply{
    margin-top: 5px;
    text-align: center;
}
#panel #apply input{
    background: green;
    border: none;
    border-radius: 3px;
    padding: 7px 0px;
    width: 100px;
    color: white;
}
#panel label{
    box-sizing: border-box;
    display: inline-block;
    width: 60px;
}
#panel [name]{
    box-sizing: border-box;
    width: 100px;
    border-radius: 0;
    border: 1px solid white;
    padding: 2px 0px 2px 5px;
    background-color: #e9e9e9;
}

#panel select:disabled,
#panel input:disabled{
    background: none;
    border: none;
}
#panel select:disabled {
    appearance: none;
    -webkit-appearance: none; /* For Safari, Chrome, Opera */
    -moz-appearance: none;    /* For Firefox */
}

#panel input[type="number"]:disabled {
    appearance: textfield;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
}
#panel input:disabled::-webkit-outer-spin-button,
#panel input:disabled::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


@media (min-width: 768px) {
    fuzzle-2d{
        width:400px;
        height:400px;
    }
    .sidebar {
        flex: 3;
    }
    .main {
        flex: 1;
    }
}

@media (max-width: 767px) {
    h1{
        display: none;
    }
    #container {
        display: flex;
        flex-wrap: wrap;
        width: 434px;
        margin: auto;
    }
    .sidebar, .main {
        flex: 100%;
        flex-direction: row;
    }
    #panel{
        height: 200px;
        width : calc(100% - 200px);
    }
}