/* 手順1 */
.board-grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    column-gap: 5px;
    row-gap: 5px;
    padding: 15px;
    width: max-content;
}

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

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

/* 手順2 */
/* 〇の場合 */
.board-precedence .board-item {
    background-color: #cc5555;
}

/* ×の場合 */
.board-second .board-item {
    background-color: #5555cc;
}

/* 選択済みの表現で利用します。 */
.board-item-void {
    display: none;
}

/* 手順3 */
.chk-board-item {
    display: none;
}

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

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

/* 手順4 */
.board-display-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

/* 手順5 */
.board-grid.board-precedence {
    display: var(--precedence-board);
}

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

.board-grid,
.chk-board-item:checked ~ .chk-board-item:checked ~ .board-grid,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board-grid,
.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-grid,
.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-grid {
    --precedence-board: grid;
    --second-board: none;
}

.chk-board-item:checked ~ .board-grid,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board-grid,
.chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .chk-board-item:checked ~ .board-grid,
.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-grid {
    --precedence-board: none;
    --second-board: grid;
}

/* 手順6 */
.board-result::before {
    --result: "";
    content: var(--result);
}

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

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

.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-result::before {
    --result: "引き分け";
}

/* 勝敗が追加時に選択できないようにします。 */
#precedence-1:checked ~ #precedence-2:checked ~ #precedence-3:checked ~ .board-grid,
#precedence-4:checked ~ #precedence-5:checked ~ #precedence-6:checked ~ .board-grid,
#precedence-7:checked ~ #precedence-8:checked ~ #precedence-9:checked ~ .board-grid,
#precedence-1:checked ~ #precedence-4:checked ~ #precedence-7:checked ~ .board-grid,
#precedence-2:checked ~ #precedence-5:checked ~ #precedence-8:checked ~ .board-grid,
#precedence-3:checked ~ #precedence-6:checked ~ #precedence-9:checked ~ .board-grid,
#precedence-1:checked ~ #precedence-5:checked ~ #precedence-9:checked ~ .board-grid,
#precedence-3:checked ~ #precedence-5:checked ~ #precedence-7:checked ~ .board-grid,
#second-1:checked ~ #second-2:checked ~ #second-3:checked ~ .board-grid,
#second-4:checked ~ #second-5:checked ~ #second-6:checked ~ .board-grid,
#second-7:checked ~ #second-8:checked ~ #second-9:checked ~ .board-grid,
#second-1:checked ~ #second-4:checked ~ #second-7:checked ~ .board-grid,
#second-2:checked ~ #second-5:checked ~ #second-8:checked ~ .board-grid,
#second-3:checked ~ #second-6:checked ~ #second-9:checked ~ .board-grid,
#second-1:checked ~ #second-5:checked ~ #second-9:checked ~ .board-grid,
#second-3:checked ~ #second-5:checked ~ #second-7:checked ~ .board-grid,
.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-grid {
    --precedence-board: none;
    --second-board: none;
}

/* 手順7 */
.board {
    position: relative;
}

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