Changes to the Statusdisplay

data/index.css

@@ -376,9 +376,10 @@ body {
   transition: transform 0.3s ease;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   height: 100%;
   overflow: hidden;
+  position: relative;
 }
 
 .lane h2 {
@@ -388,6 +389,7 @@ body {
   font-weight: bold;
   text-transform: uppercase;
   font-family: "Segoe UI", Arial, sans-serif;
+  flex-shrink: 0;
 }
 
 .swimmer-name {
@@ -426,6 +428,10 @@ body {
   font-family: "Courier New", monospace;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
   line-height: 1;
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  order: 1;
 }
 
 .status {
@@ -435,6 +441,34 @@ body {
   border-radius: 20px;
   display: inline-block;
   font-weight: 600;
+  position: relative;
+  z-index: 2;
+}
+
+.status:not(.large-status) {
+  position: relative;
+  order: 2;
+  margin-top: auto;
+}
+
+.status.large-status {
+  font-size: clamp(1.8rem, 5vw, 5rem);
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  margin: 0 !important;
+  padding: clamp(8px, 1.5vh, 15px) clamp(15px, 3vw, 30px);
+  white-space: normal;
+  pointer-events: none;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.85) !important;
+  backdrop-filter: blur(5px);
+  width: calc(100% - 40px);
+  max-width: calc(100% - 40px);
+  word-wrap: break-word;
+  line-height: 1.3;
+  overflow: visible;
 }
 
 .status.finished {