<div class="container">
<div class="header">
<h1>Pure HTML+CSS "Connect Four"</h1>
<h2>No Javascript at all!</h2>
</div>
<form class="board-container">
<input type="checkbox" id="r-r1c1" class="move red r1 c1">
<input type="checkbox" id="r-r1c2" class="move red r1 c2">
<input type="checkbox" id="r-r1c3" class="move red r1 c3">
<input type="checkbox" id="r-r1c4" class="move red r1 c4">
<input type="checkbox" id="r-r1c5" class="move red r1 c5">
<input type="checkbox" id="r-r1c6" class="move red r1 c6">
<input type="checkbox" id="r-r1c7" class="move red r1 c7">
<input type="checkbox" id="r-r2c1" class="move red r2 c1">
<input type="checkbox" id="r-r2c2" class="move red r2 c2">
<input type="checkbox" id="r-r2c3" class="move red r2 c3">
<input type="checkbox" id="r-r2c4" class="move red r2 c4">
<input type="checkbox" id="r-r2c5" class="move red r2 c5">
<input type="checkbox" id="r-r2c6" class="move red r2 c6">
<input type="checkbox" id="r-r2c7" class="move red r2 c7">
<input type="checkbox" id="r-r3c1" class="move red r3 c1">
<input type="checkbox" id="r-r3c2" class="move red r3 c2">
<input type="checkbox" id="r-r3c3" class="move red r3 c3">
<input type="checkbox" id="r-r3c4" class="move red r3 c4">
<input type="checkbox" id="r-r3c5" class="move red r3 c5">
<input type="checkbox" id="r-r3c6" class="move red r3 c6">
<input type="checkbox" id="r-r3c7" class="move red r3 c7">
<input type="checkbox" id="r-r4c1" class="move red r4 c1">
<input type="checkbox" id="r-r4c2" class="move red r4 c2">
<input type="checkbox" id="r-r4c3" class="move red r4 c3">
<input type="checkbox" id="r-r4c4" class="move red r4 c4">
<input type="checkbox" id="r-r4c5" class="move red r4 c5">
<input type="checkbox" id="r-r4c6" class="move red r4 c6">
<input type="checkbox" id="r-r4c7" class="move red r4 c7">
<input type="checkbox" id="r-r5c1" class="move red r5 c1">
<input type="checkbox" id="r-r5c2" class="move red r5 c2">
<input type="checkbox" id="r-r5c3" class="move red r5 c3">
<input type="checkbox" id="r-r5c4" class="move red r5 c4">
<input type="checkbox" id="r-r5c5" class="move red r5 c5">
<input type="checkbox" id="r-r5c6" class="move red r5 c6">
<input type="checkbox" id="r-r5c7" class="move red r5 c7">
<input type="checkbox" id="r-r6c1" class="move red r6 c1">
<input type="checkbox" id="r-r6c2" class="move red r6 c2">
<input type="checkbox" id="r-r6c3" class="move red r6 c3">
<input type="checkbox" id="r-r6c4" class="move red r6 c4">
<input type="checkbox" id="r-r6c5" class="move red r6 c5">
<input type="checkbox" id="r-r6c6" class="move red r6 c6">
<input type="checkbox" id="r-r6c7" class="move red r6 c7">
<input type="checkbox" id="y-r1c1" class="move yellow r1 c1">
<input type="checkbox" id="y-r1c2" class="move yellow r1 c2">
<input type="checkbox" id="y-r1c3" class="move yellow r1 c3">
<input type="checkbox" id="y-r1c4" class="move yellow r1 c4">
<input type="checkbox" id="y-r1c5" class="move yellow r1 c5">
<input type="checkbox" id="y-r1c6" class="move yellow r1 c6">
<input type="checkbox" id="y-r1c7" class="move yellow r1 c7">
<input type="checkbox" id="y-r2c1" class="move yellow r2 c1">
<input type="checkbox" id="y-r2c2" class="move yellow r2 c2">
<input type="checkbox" id="y-r2c3" class="move yellow r2 c3">
<input type="checkbox" id="y-r2c4" class="move yellow r2 c4">
<input type="checkbox" id="y-r2c5" class="move yellow r2 c5">
<input type="checkbox" id="y-r2c6" class="move yellow r2 c6">
<input type="checkbox" id="y-r2c7" class="move yellow r2 c7">
<input type="checkbox" id="y-r3c1" class="move yellow r3 c1">
<input type="checkbox" id="y-r3c2" class="move yellow r3 c2">
<input type="checkbox" id="y-r3c3" class="move yellow r3 c3">
<input type="checkbox" id="y-r3c4" class="move yellow r3 c4">
<input type="checkbox" id="y-r3c5" class="move yellow r3 c5">
<input type="checkbox" id="y-r3c6" class="move yellow r3 c6">
<input type="checkbox" id="y-r3c7" class="move yellow r3 c7">
<input type="checkbox" id="y-r4c1" class="move yellow r4 c1">
<input type="checkbox" id="y-r4c2" class="move yellow r4 c2">
<input type="checkbox" id="y-r4c3" class="move yellow r4 c3">
<input type="checkbox" id="y-r4c4" class="move yellow r4 c4">
<input type="checkbox" id="y-r4c5" class="move yellow r4 c5">
<input type="checkbox" id="y-r4c6" class="move yellow r4 c6">
<input type="checkbox" id="y-r4c7" class="move yellow r4 c7">
<input type="checkbox" id="y-r5c1" class="move yellow r5 c1">
<input type="checkbox" id="y-r5c2" class="move yellow r5 c2">
<input type="checkbox" id="y-r5c3" class="move yellow r5 c3">
<input type="checkbox" id="y-r5c4" class="move yellow r5 c4">
<input type="checkbox" id="y-r5c5" class="move yellow r5 c5">
<input type="checkbox" id="y-r5c6" class="move yellow r5 c6">
<input type="checkbox" id="y-r5c7" class="move yellow r5 c7">
<input type="checkbox" id="y-r6c1" class="move yellow r6 c1">
<input type="checkbox" id="y-r6c2" class="move yellow r6 c2">
<input type="checkbox" id="y-r6c3" class="move yellow r6 c3">
<input type="checkbox" id="y-r6c4" class="move yellow r6 c4">
<input type="checkbox" id="y-r6c5" class="move yellow r6 c5">
<input type="checkbox" id="y-r6c6" class="move yellow r6 c6">
<input type="checkbox" id="y-r6c7" class="move yellow r6 c7">
<label id="reset" for="chkDialog">↻</label>
<input type="checkbox" id="chkDialog" class="dialog">
<div class="dialog">
<div class="dialog-inner">
<div class="title">
<span>New Game?</span>
<label for="chkDialog">✕</label>
</div>
<div class="body">
Are you sure you want to restart the game?
</div>
<div class="action">
<button type="reset" class="button new-game">New Game</button>
<label for="chkDialog" class="button cancel">Cancel</label>
</div>
</div>
</div>
<div class="labels">
<div class="label c1">
<label for="r-r1c1" class="red r1 c1"></label>
<label for="y-r1c1" class="yellow r1 c1"></label>
<label for="r-r2c1" class="red r2 c1"></label>
<label for="y-r2c1" class="yellow r2 c1"></label>
<label for="r-r3c1" class="red r3 c1"></label>
<label for="y-r3c1" class="yellow r3 c1"></label>
<label for="r-r4c1" class="red r4 c1"></label>
<label for="y-r4c1" class="yellow r4 c1"></label>
<label for="r-r5c1" class="red r5 c1"></label>
<label for="y-r5c1" class="yellow r5 c1"></label>
<label for="r-r6c1" class="red r6 c1"></label>
<label for="y-r6c1" class="yellow r6 c1"></label>
</div>
<div class="label c2">
<label for="r-r1c2" class="red r1 c2"></label>
<label for="y-r1c2" class="yellow r1 c2"></label>
<label for="r-r2c2" class="red r2 c2"></label>
<label for="y-r2c2" class="yellow r2 c2"></label>
<label for="r-r3c2" class="red r3 c2"></label>
<label for="y-r3c2" class="yellow r3 c2"></label>
<label for="r-r4c2" class="red r4 c2"></label>
<label for="y-r4c2" class="yellow r4 c2"></label>
<label for="r-r5c2" class="red r5 c2"></label>
<label for="y-r5c2" class="yellow r5 c2"></label>
<label for="r-r6c2" class="red r6 c2"></label>
<label for="y-r6c2" class="yellow r6 c2"></label>
</div>
<div class="label c3">
<label for="r-r1c3" class="red r1 c3"></label>
<label for="y-r1c3" class="yellow r1 c3"></label>
<label for="r-r2c3" class="red r2 c3"></label>
<label for="y-r2c3" class="yellow r2 c3"></label>
<label for="r-r3c3" class="red r3 c3"></label>
<label for="y-r3c3" class="yellow r3 c3"></label>
<label for="r-r4c3" class="red r4 c3"></label>
<label for="y-r4c3" class="yellow r4 c3"></label>
<label for="r-r5c3" class="red r5 c3"></label>
<label for="y-r5c3" class="yellow r5 c3"></label>
<label for="r-r6c3" class="red r6 c3"></label>
<label for="y-r6c3" class="yellow r6 c3"></label>
</div>
<div class="label c4">
<label for="r-r1c4" class="red r1 c4"></label>
<label for="y-r1c4" class="yellow r1 c4"></label>
<label for="r-r2c4" class="red r2 c4"></label>
<label for="y-r2c4" class="yellow r2 c4"></label>
<label for="r-r3c4" class="red r3 c4"></label>
<label for="y-r3c4" class="yellow r3 c4"></label>
<label for="r-r4c4" class="red r4 c4"></label>
<label for="y-r4c4" class="yellow r4 c4"></label>
<label for="r-r5c4" class="red r5 c4"></label>
<label for="y-r5c4" class="yellow r5 c4"></label>
<label for="r-r6c4" class="red r6 c4"></label>
<label for="y-r6c4" class="yellow r6 c4"></label>
</div>
<div class="label c5">
<label for="r-r1c5" class="red r1 c5"></label>
<label for="y-r1c5" class="yellow r1 c5"></label>
<label for="r-r2c5" class="red r2 c5"></label>
<label for="y-r2c5" class="yellow r2 c5"></label>
<label for="r-r3c5" class="red r3 c5"></label>
<label for="y-r3c5" class="yellow r3 c5"></label>
<label for="r-r4c5" class="red r4 c5"></label>
<label for="y-r4c5" class="yellow r4 c5"></label>
<label for="r-r5c5" class="red r5 c5"></label>
<label for="y-r5c5" class="yellow r5 c5"></label>
<label for="r-r6c5" class="red r6 c5"></label>
<label for="y-r6c5" class="yellow r6 c5"></label>
</div>
<div class="label c6">
<label for="r-r1c6" class="red r1 c6"></label>
<label for="y-r1c6" class="yellow r1 c6"></label>
<label for="r-r2c6" class="red r2 c6"></label>
<label for="y-r2c6" class="yellow r2 c6"></label>
<label for="r-r3c6" class="red r3 c6"></label>
<label for="y-r3c6" class="yellow r3 c6"></label>
<label for="r-r4c6" class="red r4 c6"></label>
<label for="y-r4c6" class="yellow r4 c6"></label>
<label for="r-r5c6" class="red r5 c6"></label>
<label for="y-r5c6" class="yellow r5 c6"></label>
<label for="r-r6c6" class="red r6 c6"></label>
<label for="y-r6c6" class="yellow r6 c6"></label>
</div>
<div class="label c7">
<label for="r-r1c7" class="red r1 c7"></label>
<label for="y-r1c7" class="yellow r1 c7"></label>
<label for="r-r2c7" class="red r2 c7"></label>
<label for="y-r2c7" class="yellow r2 c7"></label>
<label for="r-r3c7" class="red r3 c7"></label>
<label for="y-r3c7" class="yellow r3 c7"></label>
<label for="r-r4c7" class="red r4 c7"></label>
<label for="y-r4c7" class="yellow r4 c7"></label>
<label for="r-r5c7" class="red r5 c7"></label>
<label for="y-r5c7" class="yellow r5 c7"></label>
<label for="r-r6c7" class="red r6 c7"></label>
<label for="y-r6c7" class="yellow r6 c7"></label>
</div>
</div>
<div class="board">
<div class="cell r1 c1"></div>
<div class="cell r1 c2"></div>
<div class="cell r1 c3"></div>
<div class="cell r1 c4"></div>
<div class="cell r1 c5"></div>
<div class="cell r1 c6"></div>
<div class="cell r1 c7"></div>
<div class="cell r2 c1"></div>
<div class="cell r2 c2"></div>
<div class="cell r2 c3"></div>
<div class="cell r2 c4"></div>
<div class="cell r2 c5"></div>
<div class="cell r2 c6"></div>
<div class="cell r2 c7"></div>
<div class="cell r3 c1"></div>
<div class="cell r3 c2"></div>
<div class="cell r3 c3"></div>
<div class="cell r3 c4"></div>
<div class="cell r3 c5"></div>
<div class="cell r3 c6"></div>
<div class="cell r3 c7"></div>
<div class="cell r4 c1"></div>
<div class="cell r4 c2"></div>
<div class="cell r4 c3"></div>
<div class="cell r4 c4"></div>
<div class="cell r4 c5"></div>
<div class="cell r4 c6"></div>
<div class="cell r4 c7"></div>
<div class="cell r5 c1"></div>
<div class="cell r5 c2"></div>
<div class="cell r5 c3"></div>
<div class="cell r5 c4"></div>
<div class="cell r5 c5"></div>
<div class="cell r5 c6"></div>
<div class="cell r5 c7"></div>
<div class="cell r6 c1"></div>
<div class="cell r6 c2"></div>
<div class="cell r6 c3"></div>
<div class="cell r6 c4"></div>
<div class="cell r6 c5"></div>
<div class="cell r6 c6"></div>
<div class="cell r6 c7"></div>
<div class="grid-overlay"></div>
</div>
<div class="game-over">
<div class="banner">
<span class="winner"></span>
<button type="reset">New Game</button>
</div>
</div>
<div class="footer">
<div class="footer-labels">
<label class="yellow">Yellow's turn</label>
<label class="red">Red's turn</label>
</div>
</div>
</form>
<div class="outer-footer"></div>
</div>:root {
font-family: "Arial", sans-serif;
--fore: #eee;
color: var(--fore);
--grey: grey;
--red: #d82802;
--yellow: #ffda03;
--cell-color: none;
--base-z: 0;
--blue: #0042a3;
--bg: #059207;
user-select: none;
}
html,
body {
height: 100%;
margin: 0px;
background-color: var(--bg);
}
div.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100vw;
height: 100vh;
max-height: 100vmin;
}
h1,
h2 {
text-align: center;
}
h1 {
margin-bottom: 0px;
}
h2 {
margin-top: 0px;
}
.board-container {
position: relative;
width: 90vmin;
height: 90vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: stretch;
}
.board-container > input {
display: none;
}
.board,
.labels {
position: relative;
width: 80%;
max-height: 100%;
display: grid;
gap: 0.5vmin;
padding: 1vmin;
}
.board {
margin-top: -4vmin;
z-index: 50;
aspect-ratio: 7/6;
grid-template-columns: repeat(7, auto);
grid-template-rows: repeat(6, auto);
background-color: var(--blue);
border-radius: 5%;
box-shadow: 0 0.5vmin 1vmin 1vmin rgba(0, 0, 0, 0.5);
}
.labels {
aspect-ratio: 7/1;
grid-template-columns: repeat(7, auto);
grid-template-rows: auto;
}
label {
cursor: pointer;
}
div.label {
position: relative;
aspect-ratio: 1 / 1;
}
div.labels label {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: var(--bg);
}
label.red {
--cell-color: var(--red);
}
label.yellow {
--cell-color: var(--yellow);
}
div.labels label::before {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
content: "";
border-radius: 100%;
margin: 0.25vmin;
box-sizing: border-box;
border: 0.3vmin dashed var(--fore);
opacity: 0.25;
}
div.labels label:hover::before {
background-color: var(--cell-color);
box-shadow: inset 0px 0px 0px 1vmin var(--cell-color),
inset 0px 0px 2vmin 1vmin rgba(0, 0, 0, 0.5),
0px 0px 1vmin 0.25vmin rgba(0, 0, 0, 0.5);
opacity: 1;
border: none;
}
label.yellow.r1 {
z-index: calc(var(--base-z) + 1);
}
label.yellow.r2 {
z-index: calc(var(--base-z) + 3);
}
label.yellow.r3 {
z-index: calc(var(--base-z) + 5);
}
label.yellow.r4 {
z-index: calc(var(--base-z) + 7);
}
label.yellow.r5 {
z-index: calc(var(--base-z) + 9);
}
label.yellow.r6 {
z-index: calc(var(--base-z) + 11);
}
label.red.r1 {
z-index: calc(var(--base-z) + 2);
}
label.red.r2 {
z-index: calc(var(--base-z) + 4);
}
label.red.r3 {
z-index: calc(var(--base-z) + 6);
}
label.red.r4 {
z-index: calc(var(--base-z) + 8);
}
label.red.r5 {
z-index: calc(var(--base-z) + 10);
}
label.red.r6 {
z-index: calc(var(--base-z) + 12);
}
input.move.r1.c1:checked ~ div.labels label.r1.c1,
input.move.r1.c2:checked ~ div.labels label.r1.c2,
input.move.r1.c3:checked ~ div.labels label.r1.c3,
input.move.r1.c4:checked ~ div.labels label.r1.c4,
input.move.r1.c5:checked ~ div.labels label.r1.c5,
input.move.r1.c6:checked ~ div.labels label.r1.c6,
input.move.r1.c7:checked ~ div.labels label.r1.c7,
input.move.r2.c1:checked ~ div.labels label.r2.c1,
input.move.r2.c2:checked ~ div.labels label.r2.c2,
input.move.r2.c3:checked ~ div.labels label.r2.c3,
input.move.r2.c4:checked ~ div.labels label.r2.c4,
input.move.r2.c5:checked ~ div.labels label.r2.c5,
input.move.r2.c6:checked ~ div.labels label.r2.c6,
input.move.r2.c7:checked ~ div.labels label.r2.c7,
input.move.r3.c1:checked ~ div.labels label.r3.c1,
input.move.r3.c2:checked ~ div.labels label.r3.c2,
input.move.r3.c3:checked ~ div.labels label.r3.c3,
input.move.r3.c4:checked ~ div.labels label.r3.c4,
input.move.r3.c5:checked ~ div.labels label.r3.c5,
input.move.r3.c6:checked ~ div.labels label.r3.c6,
input.move.r3.c7:checked ~ div.labels label.r3.c7,
input.move.r4.c1:checked ~ div.labels label.r4.c1,
input.move.r4.c2:checked ~ div.labels label.r4.c2,
input.move.r4.c3:checked ~ div.labels label.r4.c3,
input.move.r4.c4:checked ~ div.labels label.r4.c4,
input.move.r4.c5:checked ~ div.labels label.r4.c5,
input.move.r4.c6:checked ~ div.labels label.r4.c6,
input.move.r4.c7:checked ~ div.labels label.r4.c7,
input.move.r5.c1:checked ~ div.labels label.r5.c1,
input.move.r5.c2:checked ~ div.labels label.r5.c2,
input.move.r5.c3:checked ~ div.labels label.r5.c3,
input.move.r5.c4:checked ~ div.labels label.r5.c4,
input.move.r5.c5:checked ~ div.labels label.r5.c5,
input.move.r5.c6:checked ~ div.labels label.r5.c6,
input.move.r5.c7:checked ~ div.labels label.r5.c7,
input.move.r6.c1:checked ~ div.labels label.r6.c1,
input.move.r6.c2:checked ~ div.labels label.r6.c2,
input.move.r6.c3:checked ~ div.labels label.r6.c3,
input.move.r6.c4:checked ~ div.labels label.r6.c4,
input.move.r6.c5:checked ~ div.labels label.r6.c5,
input.move.r6.c6:checked ~ div.labels label.r6.c6,
input.move.r6.c7:checked ~ div.labels label.r6.c7 {
display: none !important;
}
div.cell {
background-color: var(--bg);
position: relative;
aspect-ratio: 1 / 1;
border-radius: 100%;
box-shadow: inset 0 0 0.75vmin 1vmin rgba(0, 0, 0, 0.25);
}
div.cell::before {
position: absolute;
z-index: 99;
content: "";
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: -0.5vmin;
background-color: var(--blue);
border-radius: 15%;
-webkit-mask-image: radial-gradient(
circle farthest-side at center,
transparent 75%,
white 77%
);
mask-image: radial-gradient(
circle farthest-side at center,
transparent 75%,
white 77%
);
}
div.cell::after {
position: absolute;
z-index: 98;
left: 0px;
right: 0px;
top: 0px;
aspect-ratio: 1 / 1;
background-color: var(--cell-color);
content: "";
border-radius: 100%;
margin: 0.5vmin;
box-sizing: border-box;
visibility: hidden;
transition-property: top;
transition-timing-function: ease-in;
}
div.cell.r1::after {
top: calc(calc(-100% - 0.5vmin));
transition-duration: 0.1s;
}
div.cell.r2::after {
top: calc(calc(calc(-100% - 0.5vmin) * 2) + 1vmin);
transition-duration: 0.15s;
}
div.cell.r3::after {
top: calc(calc(calc(-100% - 0.5vmin) * 3) + 1vmin);
transition-duration: 0.2s;
}
div.cell.r4::after {
top: calc(calc(calc(-100% - 0.5vmin) * 4) + 1vmin);
transition-duration: 0.25s;
}
div.cell.r5::after {
top: calc(calc(calc(-100% - 0.5vmin) * 5) + 1vmin);
transition-duration: 0.3s;
}
div.cell.r6::after {
top: calc(calc(calc(-100% - 0.5vmin) * 6) + 1vmin);
transition-duration: 0.35s;
}
input.move.red.r1.c1:checked ~ div.board .cell.r1.c1::after,
input.move.red.r1.c2:checked ~ div.board .cell.r1.c2::after,
input.move.red.r1.c3:checked ~ div.board .cell.r1.c3::after,
input.move.red.r1.c4:checked ~ div.board .cell.r1.c4::after,
input.move.red.r1.c5:checked ~ div.board .cell.r1.c5::after,
input.move.red.r1.c6:checked ~ div.board .cell.r1.c6::after,
input.move.red.r1.c7:checked ~ div.board .cell.r1.c7::after,
input.move.red.r2.c1:checked ~ div.board .cell.r2.c1::after,
input.move.red.r2.c2:checked ~ div.board .cell.r2.c2::after,
input.move.red.r2.c3:checked ~ div.board .cell.r2.c3::after,
input.move.red.r2.c4:checked ~ div.board .cell.r2.c4::after,
input.move.red.r2.c5:checked ~ div.board .cell.r2.c5::after,
input.move.red.r2.c6:checked ~ div.board .cell.r2.c6::after,
input.move.red.r2.c7:checked ~ div.board .cell.r2.c7::after,
input.move.red.r3.c1:checked ~ div.board .cell.r3.c1::after,
input.move.red.r3.c2:checked ~ div.board .cell.r3.c2::after,
input.move.red.r3.c3:checked ~ div.board .cell.r3.c3::after,
input.move.red.r3.c4:checked ~ div.board .cell.r3.c4::after,
input.move.red.r3.c5:checked ~ div.board .cell.r3.c5::after,
input.move.red.r3.c6:checked ~ div.board .cell.r3.c6::after,
input.move.red.r3.c7:checked ~ div.board .cell.r3.c7::after,
input.move.red.r4.c1:checked ~ div.board .cell.r4.c1::after,
input.move.red.r4.c2:checked ~ div.board .cell.r4.c2::after,
input.move.red.r4.c3:checked ~ div.board .cell.r4.c3::after,
input.move.red.r4.c4:checked ~ div.board .cell.r4.c4::after,
input.move.red.r4.c5:checked ~ div.board .cell.r4.c5::after,
input.move.red.r4.c6:checked ~ div.board .cell.r4.c6::after,
input.move.red.r4.c7:checked ~ div.board .cell.r4.c7::after,
input.move.red.r5.c1:checked ~ div.board .cell.r5.c1::after,
input.move.red.r5.c2:checked ~ div.board .cell.r5.c2::after,
input.move.red.r5.c3:checked ~ div.board .cell.r5.c3::after,
input.move.red.r5.c4:checked ~ div.board .cell.r5.c4::after,
input.move.red.r5.c5:checked ~ div.board .cell.r5.c5::after,
input.move.red.r5.c6:checked ~ div.board .cell.r5.c6::after,
input.move.red.r5.c7:checked ~ div.board .cell.r5.c7::after,
input.move.red.r6.c1:checked ~ div.board .cell.r6.c1::after,
input.move.red.r6.c2:checked ~ div.board .cell.r6.c2::after,
input.move.red.r6.c3:checked ~ div.board .cell.r6.c3::after,
input.move.red.r6.c4:checked ~ div.board .cell.r6.c4::after,
input.move.red.r6.c5:checked ~ div.board .cell.r6.c5::after,
input.move.red.r6.c6:checked ~ div.board .cell.r6.c6::after,
input.move.red.r6.c7:checked ~ div.board .cell.r6.c7::after {
background-color: var(--red);
box-shadow: inset 0vmin 0vmin 0.25vmin 0.5vmin rgba(0, 0, 0, 0.5),
inset 0px 0px 0px 1vmin var(--red),
inset 0px 0px 2vmin 1vmin rgba(0, 0, 0, 0.5);
visibility: visible;
top: 0px;``````
}
input.move.yellow.r1.c1:checked ~ div.board .cell.r1.c1::after,
input.move.yellow.r1.c2:checked ~ div.board .cell.r1.c2::after,
input.move.yellow.r1.c3:checked ~ div.board .cell.r1.c3::after,
input.move.yellow.r1.c4:checked ~ div.board .cell.r1.c4::after,
input.move.yellow.r1.c5:checked ~ div.board .cell.r1.c5::after,
input.move.yellow.r1.c6:checked ~ div.board .cell.r1.c6::after,
input.move.yellow.r1.c7:checked ~ div.board .cell.r1.c7::after,
input.move.yellow.r2.c1:checked ~ div.board .cell.r2.c1::after,
input.move.yellow.r2.c2:checked ~ div.board .cell.r2.c2::after,
input.move.yellow.r2.c3:checked ~ div.board .cell.r2.c3::after,
input.move.yellow.r2.c4:checked ~ div.board .cell.r2.c4::after,
input.move.yellow.r2.c5:checked ~ div.board .cell.r2.c5::after,
input.move.yellow.r2.c6:checked ~ div.board .cell.r2.c6::after,
input.move.yellow.r2.c7:checked ~ div.board .cell.r2.c7::after,
input.move.yellow.r3.c1:checked ~ div.board .cell.r3.c1::after,
input.move.yellow.r3.c2:checked ~ div.board .cell.r3.c2::after,
input.move.yellow.r3.c3:checked ~ div.board .cell.r3.c3::after,
input.move.yellow.r3.c4:checked ~ div.board .cell.r3.c4::after,
input.move.yellow.r3.c5:checked ~ div.board .cell.r3.c5::after,
input.move.yellow.r3.c6:checked ~ div.board .cell.r3.c6::after,
input.move.yellow.r3.c7:checked ~ div.board .cell.r3.c7::after,
input.move.yellow.r4.c1:checked ~ div.board .cell.r4.c1::after,
input.move.yellow.r4.c2:checked ~ div.board .cell.r4.c2::after,
input.move.yellow.r4.c3:checked ~ div.board .cell.r4.c3::after,
input.move.yellow.r4.c4:checked ~ div.board .cell.r4.c4::after,
input.move.yellow.r4.c5:checked ~ div.board .cell.r4.c5::after,
input.move.yellow.r4.c6:checked ~ div.board .cell.r4.c6::after,
input.move.yellow.r4.c7:checked ~ div.board .cell.r4.c7::after,
input.move.yellow.r5.c1:checked ~ div.board .cell.r5.c1::after,
input.move.yellow.r5.c2:checked ~ div.board .cell.r5.c2::after,
input.move.yellow.r5.c3:checked ~ div.board .cell.r5.c3::after,
input.move.yellow.r5.c4:checked ~ div.board .cell.r5.c4::after,
input.move.yellow.r5.c5:checked ~ div.board .cell.r5.c5::after,
input.move.yellow.r5.c6:checked ~ div.board .cell.r5.c6::after,
input.move.yellow.r5.c7:checked ~ div.board .cell.r5.c7::after,
input.move.yellow.r6.c1:checked ~ div.board .cell.r6.c1::after,
input.move.yellow.r6.c2:checked ~ div.board .cell.r6.c2::after,
input.move.yellow.r6.c3:checked ~ div.board .cell.r6.c3::after,
input.move.yellow.r6.c4:checked ~ div.board .cell.r6.c4::after,
input.move.yellow.r6.c5:checked ~ div.board .cell.r6.c5::after,
input.move.yellow.r6.c6:checked ~ div.board .cell.r6.c6::after,
input.move.yellow.r6.c7:checked ~ div.board .cell.r6.c7::after {
background-color: var(--yellow);
box-shadow: inset 0vmin 0vmin 0.25vmin 0.5vmin rgba(0, 0, 0, 0.75),
inset 0px 0px 0px 1vmin var(--yellow),
inset 0px 0px 2vmin 1vmin rgba(0, 0, 0, 0.5);
visibility: visible;
top: 0px;
}
input.move:checked ~ :is(div.labels, div.footer) label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red {
display: none;
}
input.move:checked ~ input.move:checked ~ :is(div.labels, div.footer) label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red,
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(div.labels, div.footer)
label.red {
display: block;
}
/* Red Wins */
input.move.red:checked
+ input.move.red:not(.c1):checked
+ input.move.red:not(.c1):checked
+ input.move.red:not(.c1):checked
~ :is(.footer, .game-over),
input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
~ :is(.footer, .game-over),
input.move.red:is(.c1, .c2, .c3, .c4):checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
~ :is(.footer, .game-over),
input.move.red:is(.c4, .c5, .c6, .c7):checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.red:checked
~ :is(.footer, .game-over) {
--winner: "Red Wins!";
}
/* Yellow Wins */
input.move.yellow:checked
+ input.move.yellow:not(.c1):checked
+ input.move.yellow:not(.c1):checked
+ input.move.yellow:not(.c1):checked
~ :is(.footer, .game-over),
input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ :is(.footer, .game-over),
input.move.yellow:is(.c1, .c2, .c3, .c4):checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ :is(.footer, .game-over),
input.move.yellow:is(.c4, .c5, .c6, .c7):checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ :is(.footer, .game-over) {
--winner: "Yellow Wins!";
}
/* Game Over with Win*/
input.move.red:checked
+ input.move.red:not(.c1):checked
+ input.move.red:not(.c1):checked
+ input.move.red:not(.c1):checked
~ .game-over,
input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
~ .game-over,
input.move.red:is(.c1, .c2, .c3, .c4):checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
~ .game-over,
input.move.red:is(.c4, .c5, .c6, .c7):checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red
+ input.move.red:checked
~ .game-over,
input.move.yellow:checked
+ input.move.yellow:not(.c1):checked
+ input.move.yellow:not(.c1):checked
+ input.move.yellow:not(.c1):checked
~ .game-over,
input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ .game-over,
input.move.yellow:is(.c1, .c2, .c3, .c4):checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ .game-over,
input.move.yellow:is(.c4, .c5, .c6, .c7):checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow
+ input.move.yellow:checked
~ .game-over {
display: block;
}
/* Tie Game */
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ .game-over {
display: block;
}
input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ input.move:checked
~ :is(.footer, .game-over) {
--winner: "Tie Game!";
}
/******/
.board-container .footer {
background-color: black;
width: 100%;
position: fixed;
margin-top: 2vmin;
display: flex;
justify-content: center;
align-items: center;
bottom: 0px;
height: 10vmin;
z-index: 99;
}
.footer-labels {
position: relative;
text-align: center;
width: 100%;
height: 100%;
}
.footer label {
background-color: #000;
padding: 2vmin;
position: absolute;
text-align: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
.footer::after {
background-color: #000;
position: absolute;
padding: 2vmin;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
content: var(--winner);
}
div.game-over {
display: none;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
}
div.game-over::before {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000;
content: "";
opacity: 0.2;
}
div.game-over .banner {
position: fixed;
padding: 4vmin;
top: 25%;
left: 0px;
right: 0px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
font-size: 8vmin;
font-weight: bold;
text-shadow: 0.1em 0.1em 0.4em black, 0.2em 0.2em 0.8em black,
0px 0px 0.2em black;
}
div.game-over .banner::after {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
content: "";
background-color: #000;
opacity: 0.25;
z-index: -1;
}
div.game-over .banner span::after {
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
content: var(--winner);
}
div.game-over button {
margin-top: 0.5vmin;
padding: 2vmin;
font-size: 0.5em;
border-radius: 2vmin;
cursor: pointer;
box-shadow: 0px 0px 0.5vmin 0.25vmin #333;
background-color: var(--red);
color: #eee;
}
div.grid-overlay {
position: absolute;
z-index: 99;
top: 0px;
}
div.outer-footer {
height: 10vmin;
}
#reset {
position: fixed;
top: 0px;
right: 0px;
background-color: var(--bg);
cursor: pointer;
border: none;
color: var(--fore);
font-size: 2em;
transform: rotate(90deg);
padding-top: 2vmin;
padding-right: 1vmin;
display: none;
}
#reset:active {
opacity: 0.5;
}
input.move:checked ~ #reset {
display: block;
}
div.dialog {
display: flex;
opacity: 0;
visibility: hidden;
position: fixed;
z-index: 200;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.2);
align-items: center;
justify-content: center;
transition: opacity 0.5s, visibility 0.5s;
}
input.dialog:checked ~ div.dialog {
opacity: 1;
visibility: visible;
}
.dialog-inner {
background-color: #fff;
position: absolute;
margin-top: -25vmin;
height: 25vmin;
width: 50vmin;
display: flex;
flex-direction: column;
border-radius: 1vmin;
box-shadow: 0px 0px 1vmin 0.75vmin rgba(0, 0, 0, 1);
font-size: 2vmin;
justify-items: stretch;
}
.dialog-inner .title {
background-color: var(--blue);
padding: 1vmin;
display: flex;
justify-items: space-between;
font-weight: bold;
}
.dialog-inner .title span {
flex-grow: 1;
padding-left: 1vmin;
}
.dialog-inner .title label {
justify-self: end;
}
.dialog-inner .title label:hover:active {
opacity: 0.75;
}
.dialog-inner .body {
flex-grow: 1;
padding: 2vmin;
color: var(--grey);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
text-align: center;
line-height: 1.25em;
}
.dialog-inner .action {
padding: 1vmin;
text-align: right;
}
.dialog-inner .action .button {
cursor: pointer;
font-size: 1em;
margin: 0px;
padding: 1vmin;
border-radius: 1vmin;
font-weight: bold;
}
.dialog-inner .action .button:hover:active {
opacity: 0.75;
}
.button.new-game {
background-color: var(--red);
color: #eee;
}
.button.cancel {
color: var(--grey);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.