diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index a9f05dc..eb28a3e 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -23,7 +23,7 @@
   border-collapse: unset;
   border-radius: 2.8%;
   border-spacing: 1px;
-  box-shadow: 0 (var(--board-size) / 200) (var(--board-size) / 40) $board-shadow-color;
+  box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
   color: $white-square-color;
   height: var(--board-size);
   padding: calc(var(--board-size) / 20);
@@ -97,11 +97,29 @@
 }
 
 .board-game-state {
+  align-items: center;
   bottom: 0;
-  color: white;
+  color: $foreground-color;
+  display: flex;
+  font-size: calc(var(--board-size) / 30);
   height: 5%;
   position: absolute;
   width: 90%;
+
+  &.checkmate,
+  &.stalemate {
+    align-items: center;
+    background-color: $game-state-background-color;
+    border-radius: calc(var(--board-size) / 75);
+    box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color,
+    inset 0 0 0 calc(var(--board-size) / 300) $white-square-color;
+    display: flex;
+    height: 7.5%;
+    justify-content: center;
+    left: calc(50% - 15%);
+    top: calc(50% - 3.5%);
+    width: 30%;
+  }
 }
 
 .board-label {
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 5ca89b3..1ae402c 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -18,6 +18,8 @@ $white-square-color: #bbb;
 $selected-square-color: #0cf;
 $available-square-color: #6f0;
 
+$game-state-background-color: darken($black-square-color, 10%);
+
 $square-outline-color: darken($black-square-color, 20%);
 $selected-outline-color: lighten($selected-square-color, 20%);
 $available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);