body {
    margin: 0;
    padding: 0;
    background-color: #252;
}

.game-contents {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.chk-board-item {
    display: none;
}

#btn-reset {
    font-size: 32px;
    width: 100%;
    padding: 5px 15px;
    border: none;
    background-color: #55aa33;
}

.board {
    --turn: "〇のターン";
    --precedence-board: grid;
    --second-board: none;
    --mark: "";
    --result: "";
    --result-z-index: -1;
    --result-opacity: 0;
    margin-bottom: 15px;
}

.board-contents {
    position: relative;
}

.board-precedence,
.board-second {
    position: absolute;
    top: 0;
    left: 0;
}

.board-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--result-z-index);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 330px;
    padding: 15px;
    background-color: #222;
    color: #ff0;
    font-size: 32px;
    opacity: var(--result-opacity);
}

.board-result::before {
    content: var(--result);
}

.board-grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    row-gap: 5px;
    column-gap: 5px;
    padding: 15px;
}

.board-display {
    background: #333;
    border-radius: 15px;
}

.board-precedence {
    display: var(--precedence-board);
}

.board-second {
    display: var(--second-board);
}

.board-precedence .board-item {
    background-color: #cc5555;
}

.board-second .board-item {
    background-color: #5555cc;
}

.board-display .board-display-item {
    background-color: #55ff55;
}

.board-display-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-display-item::before {
    content: var(--mark);
    font-size: 100px;
}

.board-turn::before {
    font-size: 32px;
    color: #fff;
    content: var(--turn);
}

.board-item-void {
    display: none;
}

.chk-board-item.item-1:checked ~ .board .board-item.item-1,
.chk-board-item.item-2:checked ~ .board .board-item.item-2,
.chk-board-item.item-3:checked ~ .board .board-item.item-3,
.chk-board-item.item-4:checked ~ .board .board-item.item-4,
.chk-board-item.item-5:checked ~ .board .board-item.item-5,
.chk-board-item.item-6:checked ~ .board .board-item.item-6,
.chk-board-item.item-7:checked ~ .board .board-item.item-7,
.chk-board-item.item-8:checked ~ .board .board-item.item-8,
.chk-board-item.item-9:checked ~ .board .board-item.item-9 {
    display: none;
}

.chk-board-item.item-1:checked ~ .board .board-item-void.item-1,
.chk-board-item.item-2:checked ~ .board .board-item-void.item-2,
.chk-board-item.item-3:checked ~ .board .board-item-void.item-3,
.chk-board-item.item-4:checked ~ .board .board-item-void.item-4,
.chk-board-item.item-5:checked ~ .board .board-item-void.item-5,
.chk-board-item.item-6:checked ~ .board .board-item-void.item-6,
.chk-board-item.item-7:checked ~ .board .board-item-void.item-7,
.chk-board-item.item-8:checked ~ .board .board-item-void.item-8,
.chk-board-item.item-9:checked ~ .board .board-item-void.item-9 {
    display: block;
}

#precedence-1:checked ~ .board #display-1::before,
#precedence-2:checked ~ .board #display-2::before,
#precedence-3:checked ~ .board #display-3::before,
#precedence-4:checked ~ .board #display-4::before,
#precedence-5:checked ~ .board #display-5::before,
#precedence-6:checked ~ .board #display-6::before,
#precedence-7:checked ~ .board #display-7::before,
#precedence-8:checked ~ .board #display-8::before,
#precedence-9:checked ~ .board #display-9::before {
    --mark: "〇";
}

#second-1:checked ~ .board #display-1::before,
#second-2:checked ~ .board #display-2::before,
#second-3:checked ~ .board #display-3::before,
#second-4:checked ~ .board #display-4::before,
#second-5:checked ~ .board #display-5::before,
#second-6:checked ~ .board #display-6::before,
#second-7:checked ~ .board #display-7::before,
#second-8:checked ~ .board #display-8::before,
#second-9:checked ~ .board #display-9::before {
    --mark: "×";
}

.chk-board-item:checked ~ .chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board {
    --turn: "〇のターン";
    --precedence-board: grid;
    --second-board: none;
}

.chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board {
    --turn: "×のターン";
    --precedence-board: none;
    --second-board: grid;
}


#precedence-1:checked ~ #precedence-2:checked ~ #precedence-3:checked ~ .board,
#precedence-4:checked ~ #precedence-5:checked ~ #precedence-6:checked ~ .board,
#precedence-7:checked ~ #precedence-8:checked ~ #precedence-9:checked ~ .board,
#precedence-1:checked ~ #precedence-4:checked ~ #precedence-7:checked ~ .board,
#precedence-2:checked ~ #precedence-5:checked ~ #precedence-8:checked ~ .board,
#precedence-3:checked ~ #precedence-6:checked ~ #precedence-9:checked ~ .board,
#precedence-1:checked ~ #precedence-5:checked ~ #precedence-9:checked ~ .board,
#precedence-3:checked ~ #precedence-5:checked ~ #precedence-7:checked ~ .board,
#second-1:checked ~ #second-2:checked ~ #second-3:checked ~ .board,
#second-4:checked ~ #second-5:checked ~ #second-6:checked ~ .board,
#second-7:checked ~ #second-8:checked ~ #second-9:checked ~ .board,
#second-1:checked ~ #second-4:checked ~ #second-7:checked ~ .board,
#second-2:checked ~ #second-5:checked ~ #second-8:checked ~ .board,
#second-3:checked ~ #second-6:checked ~ #second-9:checked ~ .board,
#second-1:checked ~ #second-5:checked ~ #second-9:checked ~ .board,
#second-3:checked ~ #second-5:checked ~ #second-7:checked ~ .board,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board {
    --turn: "終了";
    --result: "引き分け";
    --precedence-board: none;
    --second-board: none;
    --result-z-index: 1;
    --result-opacity: 1;
}

#precedence-1:checked ~ #precedence-2:checked ~ #precedence-3:checked ~ .board,
#precedence-4:checked ~ #precedence-5:checked ~ #precedence-6:checked ~ .board,
#precedence-7:checked ~ #precedence-8:checked ~ #precedence-9:checked ~ .board,
#precedence-1:checked ~ #precedence-4:checked ~ #precedence-7:checked ~ .board,
#precedence-2:checked ~ #precedence-5:checked ~ #precedence-8:checked ~ .board,
#precedence-3:checked ~ #precedence-6:checked ~ #precedence-9:checked ~ .board,
#precedence-1:checked ~ #precedence-5:checked ~ #precedence-9:checked ~ .board,
#precedence-3:checked ~ #precedence-5:checked ~ #precedence-7:checked ~ .board {
    --result: "〇の勝利";
}

#second-1:checked ~ #second-2:checked ~ #second-3:checked ~ .board,
#second-4:checked ~ #second-5:checked ~ #second-6:checked ~ .board,
#second-7:checked ~ #second-8:checked ~ #second-9:checked ~ .board,
#second-1:checked ~ #second-4:checked ~ #second-7:checked ~ .board,
#second-2:checked ~ #second-5:checked ~ #second-8:checked ~ .board,
#second-3:checked ~ #second-6:checked ~ #second-9:checked ~ .board,
#second-1:checked ~ #second-5:checked ~ #second-9:checked ~ .board,
#second-3:checked ~ #second-5:checked ~ #second-7:checked ~ .board {
    --result: "×の勝利";
}