X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=scribe%2Fscribe.css;h=8423a995f2731e91d2260beb88e4b0c5912ca2bd;hp=aba532e04b0bd49f65ccb33163c96ab5d77187ba;hb=HEAD;hpb=e79802f7979a2b3162efb0968c223f527d354410

diff --git a/scribe/scribe.css b/scribe/scribe.css
index aba532e..8423a99 100644
--- a/scribe/scribe.css
+++ b/scribe/scribe.css
@@ -1,3 +1,9 @@
+: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
@@ -29,6 +35,9 @@
 }
 
 .board {
+    width: 100%;
+    height: 100%;
+
     position: absolute;
     top: 0;
     left: 0;
@@ -51,12 +60,34 @@
 
     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 {
     display: flex;
     justify-content: center;
@@ -76,6 +107,14 @@
     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);
 }