html { font-size: 10px; } body { counter-reset: total cleared bombs flagged; font-size: 1.6rem; font-family: sans-serif; } H1 { font-size:2rem; margin:1rem auto; width:fit-content } #game { overflow:hidden; position:relative; margin:0 auto; background:lightgrey; width:fit-content; height:fit-content; padding:1rem; border:0.3rem outset lightgrey; border-radius:1rem; } /* grid square. */ .square { position: relative; float: left; display: block; width: 2rem; height: 2rem; border: 1px grey solid; background-color: lightgrey; text-align: center; } /* these will be the "buttons" that hide the grid. */ .square > label, .square > .flag { position: absolute; left: -0.1rem; top: -0.1rem; right: -0.1rem; bottom: -0.1rem; border: 0.2rem outset grey; background-color: darkgrey; } /* switch for flag mode and clear mode */ #flag-mode { display:none; } /* buttons for global settings */ [for="flag-mode"], [for="show-bombs"] { display:block; margin:0 auto; width:fit-content; background:lightgrey; padding:0 0.5rem; border:2px outset grey; border-radius:0.5rem; margin:0.2rem auto; } #flag-mode:not(:checked) + [for="flag-mode"]:after { content:" OFF "; font-weight:bold; } #flag-mode:checked + [for="flag-mode"]:after { content:" ON "; font-weight:bold; } /* checkboxes to control state of each square these need to be "visible" for the counter to work. push them far off to the left. */ .open-square,.flag-square { position: absolute; left: -1000rem; } /* count the total clearable */ .open-square:not(.bomb) { counter-increment:total; } /* count the number of bombs */ .open-square.bomb { counter-increment:bombs; } /* hide the label "button" when it's clicked */ .open-square:checked + .square > label { display: none; } /* show the number of surounding bombs (if any) with different colors for the count values */ :not(.bomb)[data-count] + .square:before { line-height:2rem; font-weight:bold; } :not(.bomb)[data-count="1"] + .square:before { content:"1"; color: blue; } :not(.bomb)[data-count="2"] + .square:before { content:"2"; color: green; } :not(.bomb)[data-count="3"] + .square:before { content:"3"; color: red; } :not(.bomb)[data-count="4"] + .square:before { content:"4"; color: darkblue; } :not(.bomb)[data-count="5"] + .square:before { content:"5"; color: brown; } :not(.bomb)[data-count="6"] + .square:before { content:"6"; color: cyan; } :not(.bomb)[data-count="7"] + .square:before { content:"7"; color: black; } :not(.bomb)[data-count="8"] + .square:before { content:8; color: grey; } /* bomb square. */ .bomb + .square { background-color: red } .bomb + .square:before { content: "馃挘"; line-height: 2rem; font-size: 1.2rem; } /* default hide the flag */ .flag { display:none; } /* show the flag if square is flagged and count it */ .flag-square:checked ~ .flag { display:block; counter-increment:flagged; } /* display flag as needed */ .flag-square:checked ~ .flag-label:before, .flag-square:checked ~ .flag:before { content:"馃毄" } /* hide the label when not in flag mode */ #flag-mode:not(:checked) ~ .square > .flag-label { display:none; } /* only show the flag if the square isn't in "show" mode. */ #flag-mode:checked ~ .show-square:not(:checked) + .square > .flag-label { display:block; } /* increment cleared counter for each non-bomb checked and keep the total intact */ .open-square:not(.bomb):checked { counter-increment: total cleared; } /* various counter displays */ .bombs { width:50%; text-align:center; } .score { clear:both; float:right; text-align:right; width:50%; text-align:center; } /* track the bombs */ .bombs:after { content: counter(bombs) "馃毄" counter(flagged); line-height:3rem; border:0.2rem inset lightgrey; padding:0.2rem 0.5rem; background-color:white; border-radius:0.5rem; } /* track the total cleareable & cleared */ .score:after { content: counter(cleared) " of " counter(total); line-height:3rem; border:0.2rem inset lightgrey; padding:0.2rem 0.5rem; background-color:white; border-radius:0.5rem; } /* default setting is the win state */ .message { clear: left; color: limegreen; text-align:center; font-weight:bold; } .message:before { content: "(: YOU WIN! :) " } /* block user interaction with game board after a win. */ .pane { display:block; position:absolute; left:0; right:0; top:0; bottom:0; } /* override for the playing state */ .open-square:not(.grouped):not(.bomb):not(:checked) ~ .message:before, .group-master:not(:checked) ~ .message:before { content: none; } /* play state. hide the blocking pane. */ .open-square:not(.grouped):not(.bomb):not(:checked) ~ .pane, .group-master:not(:checked) ~ .pane, .lost-game { display: none; } /* finally, the losing state */ .open-square.bomb:checked ~ .message { color: red; } /* reinstate the blocking pane */ .open-square.bomb:checked ~ .pane { position:relative; display:block; } .open-square.bomb:checked ~ .message:before { content: " ): You Lose :(" !important; } /* display thre show bombs button if you've lost */ .open-square.bomb:checked ~ .lost-game { position:relative; display:block; z-index:2 } /* display any hidden bombs */ #show-bombs:checked ~ .bomb + .square > label { display:none; } /* mark any falsely flagged squares as wrong. */ #show-bombs:checked ~ .open-square:not(.bomb) + .square > .flag:after { content: "鉂?; position:absolute; top:-0.4rem; left:-0.1rem; }