Implement vignette during duel mode

client/src/components/screens/GamePanel/GamePanel.module.css

@@ -55,20 +55,34 @@
 
 .cutoff {
   position: absolute;
-  top: 20%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  box-shadow: 0 0 100vw rgba(240, 0, 0, 0.9) inset;
+  pointer-events: none;
+
   z-index: 3;
-  background-color: #333;
-  padding: 0.2em 1em;
-  border-radius: 1em;
-  font-size: 20px;
 
   opacity: 1;
   transition: opacity 2s;
 }
 
+.cutoffMessage {
+  position: relative;
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  width: 50%;
+  padding: 0.2em 1em;
+  border-radius: 1em;
+  font-size: 32px;
+  background-color: #333;
+  text-align: center;
+  vertical-align: middle;
+}
+
 .hidden {
   opacity: 0;
 }

client/src/components/screens/GamePanel/RaceMode.jsx

@@ -12,7 +12,9 @@ const RaceMode = ({ rate, cutoffTime }) => {
 
   return (
     <div className={`${styles.cutoff} ${faded ? styles.hidden : ""}`}>
-      You were cut off by {first}! Only {ms(cutoffTime * 1000)} left!
+      <div className={styles.cutoffMessage}>
+        You were cut off by {first}! Only {ms(cutoffTime * 1000)} left!
+      </div>
     </div>
   );
 };