@charset "utf-8";

.boardgame.baduk{
    --baduk-wihtestone-color:#eef;
    --baduk-blackstone-color:#113;
    --baduk-wihtestone-shadow:inset -3px -3px 6px #3336,inset 3px 3px 6px #3332, 3px 3px 6px #0009;
    --baduk-blackstone-shadow:inset 3px 3px 6px #fff9,inset -3px -3px 6px #3333, 3px 3px 6px #0009;


    --grid-border:1px solid #333;
    user-select: none;

    aspect-ratio: 1 / 1;

    width: auto;
    max-width: 100vw;
    height: auto;
    max-height: 100vh;

    --squre-number:18
}

.boardgame.baduk .baduk-body{
    width:100%;
    height: 100%; 
    background-color: rgb(223, 172, 122);
}
.baduk .board-grids{
    width:100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(calc(var(--squre-number) + 2) , 1fr);
    grid-template-rows: repeat(calc(var(--squre-number) + 2) , 1fr);
}
.baduk .board-grids .grid-squares-wrap{
    width:100%;
    height: 100%;
    grid-area: 2 / 2 / span var(--squre-number) / span var(--squre-number);
    display: grid;
    grid-template-columns: 0.5fr repeat(var(--squre-number) , 1fr) 0.5fr;
    grid-template-rows: 0.5fr repeat(var(--squre-number) , 1fr) 0.5fr;
}
.baduk .board-grids :where(.grid-squares,.grid-dots){
    pointer-events: none;
    /* width:100%;
    height: 100%; */
    grid-area: 2 / 2 / span var(--squre-number) / span var(--squre-number);
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    outline: var(--grid-border);
}



.baduk .board-grids .grid-squares > *{
    outline: var(--grid-border);
    outline-offset: -1px;
}
.baduk .board-grids .grid-cross{
    /* width:100%;
    height: 100%; */
    grid-area: 2 / 2 / span var(--squre-number) / span var(--squre-number);
    display: grid;
    grid-template-columns: repeat(calc(var(--squre-number) + 1) , 1fr);
    grid-template-rows: repeat(calc(var(--squre-number) + 1) , 1fr);
}

/* stone */
.baduk .board-grids .grid-cross > *,
.baduk .board-grids .grid-cross > *[data-color],
.baduk .stone{
    border-width: 0px;
    margin:5%;
    border-radius: 999vmin;
    background-color: transparent;
    outline: 1px dashed #3333;
    cursor: pointer;
}
.baduk .board-grids .grid-cross > *[data-color="w"],
.baduk .stone[data-color="w"]{
    outline-width: 0;
    background-color: var(--baduk-wihtestone-color);
    box-shadow: var(--baduk-wihtestone-shadow);
}
.baduk .board-grids .grid-cross > *[data-color="b"] , 
.baduk .stone[data-color="b"]{
    outline-width: 0;
    background-color: var(--baduk-blackstone-color);
    box-shadow: var(--baduk-blackstone-shadow);
}
.baduk .board-grids .grid-cross > *:hover{
    outline: 2px solid #0f99;
}
.baduk .clear-stone{
    display: flex;
    overflow: hidden;
    padding: 0;
    justify-content: center;
    align-items: center;
}


/* dot */
.baduk .grid-dots .grid-dot{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-end:span 2;
    grid-row-end:span 2;
}
.baduk .grid-dots .grid-dot::before{
    --size:max(8px , 10%);
    content: "";
    display: block;
    width: var(--size);height: var(--size);
    background-color: #000;
    border-radius: 999vmin;    
}

.baduk .grid-dot[data-dot="1"]{ grid-column-start:  3; grid-row-start: 3; }
.baduk .grid-dot[data-dot="2"]{ grid-column-start:  9; grid-row-start: 3; }
.baduk .grid-dot[data-dot="3"]{ grid-column-start: 15; grid-row-start: 3; }
.baduk .grid-dot[data-dot="4"]{ grid-column-start:  3; grid-row-start: 9; }
.baduk .grid-dot[data-dot="5"]{ grid-column-start:  9; grid-row-start: 9; }
.baduk .grid-dot[data-dot="6"]{ grid-column-start: 15; grid-row-start: 9; }
.baduk .grid-dot[data-dot="7"]{ grid-column-start:  3; grid-row-start: 15; }
.baduk .grid-dot[data-dot="8"]{ grid-column-start:  9; grid-row-start: 15; }
.baduk .grid-dot[data-dot="9"]{ grid-column-start: 15; grid-row-start: 15; }


/* grid-switch */
.baduk .grid-switch{
    grid-area: 1 / 1 / span 1 / span 4  ;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}
.baduk .grid-switch-2{
    grid-area: 20 / 17 / span 1 / span 4  ;
    
}


.baduk[data-color=""]  .grid-switch .stone[data-color=""],
.baduk[data-color="w"]  .grid-switch .stone[data-color="w"],
.baduk[data-color="b"]  .grid-switch .stone[data-color="b"]{
    outline: #f90 2px solid;
}