+:root {
+ /* Colors for the two players. */
+ --o-color: #c2dfff;
+ --plus-color: #fdd7e4;
+}
+
/* We want our board to be the largest square that can
* fit. Unfortunately, it requires a bit of CSS magic to make that
* happen. We can set a width easily enough, but what we can't easily
border-radius: 6px;
border: 3px solid #999;
+
+ position:relative;
+}
+
+.mini-grid.active {
+ border: 3px solid var(--accent-color-bright);
+}
+
+.mini-grid.o-wins .square, .mini-grid.plus-wins .square {
+ opacity: 0.6;
+}
+
+.mini-grid .winner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 0;
+ font-size: calc(min(35vw, .35 * var(--page-max-width)));
+ font-weight: bold;
+ opacity: 0.20;
}
.square {
cursor: default;
}
+.square.glyph-o {
+ background: var(--o-color);
+}
+
+.square.glyph-plus {
+ background: var(--plus-color);
+}
+
.square.open:hover {
background-color: var(--accent-color-bright);
}
+.square.last-move {
+ color: var(--accent-color-bright);
+}
+
.glyphs {
padding-top: 0.5em;
display: grid;