add: basic subtitle

src/index.css

@@ -397,6 +397,47 @@ canvas {
   letter-spacing: 0.03em;
 }
 
+/* Subtitles */
+.subtitles {
+  position: fixed;
+  left: 50%;
+  bottom: 7vh;
+  z-index: 15;
+  width: min(780px, calc(100vw - 32px));
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.subtitles p {
+  margin: 0;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.82);
+  color: #ffffff;
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  font-weight: 650;
+  line-height: 1.45;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
+}
+
+.subtitles__speaker {
+  margin-right: 0.35em;
+  font-weight: 800;
+}
+
+.subtitles__speaker--narrateur {
+  color: #7dd3fc;
+}
+
+.subtitles__speaker--fermier {
+  color: #86efac;
+}
+
+.subtitles__speaker--leonie {
+  color: #f9a8d4;
+}
+
 /* In-game settings menu */
 .game-settings-menu {
   position: fixed;