Better visuals, add timer, add vibration on mobile, add light theme.

www/style.css

@@ -1,5 +1,6 @@
 :root {
     --background: black;
+    --backgroundLighter: rgb(20, 20, 20);
     --foreground: white;
     --saBORbackground: rgba(54, 54, 54, 0.5);
     --saBORforeground: darkgrey;
@@ -7,10 +8,24 @@
     --civilColor: rgb(0, 50, 0);
 }
 
+.light-theme {
+    --background: white;
+    --backgroundLighter: rgb(230, 230, 230);
+    --foreground: black;
+    --saBORbackground: rgba(200, 200, 200, 0.5);
+    --saBORforeground: darkgrey;
+    --impostorColor: rgb(200, 120, 120);
+    --civilColor: rgb(120, 200, 120);
+}
+
 * {
+    transition: .2s;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    scrollbar-color: var(--foreground) transparent;
+    scrollbar-width: thin;
+    user-select: none;
 }
 
 body {
@@ -23,8 +38,11 @@ body {
     padding: 2em;
     gap: 1em;
     height: 100vh;
+    max-height: 100vh;
     width: 30vw;
     margin: auto;
+    overflow: hidden;
+    scroll-behavior: smooth;
 }
 
 header {
@@ -92,19 +110,21 @@ button {
 }
 
 /* button:hover {
-    background-color: var(--foreground);
-    color: var(--background);
+background-color: var(--foreground);
+color: var(--background);
 } */
 
 .playerHolder {
     margin-bottom: 1em;
     display: flex;
     gap: .6em;
+    overflow-y: auto;
+    overflow-x: hidden;
     
     button {
         background-color: transparent;
         font-family: monospace;
-        color: white;
+        color: var(--foreground);
         text-shadow: none;
     }
 }
@@ -115,12 +135,11 @@ input:focus {
 
 #newPlayerButton {
     width: 100%;
-    margin-bottom: 1em;
 }
 
 #startGame {
-    margin-top: auto;
-    margin-left: auto;
+    /* margin-top: auto;
+    margin-left: auto; */
 }
 
 #gameLog {
@@ -128,6 +147,7 @@ input:focus {
     margin: auto 0;
     text-align: center;
     transition: .4s;
+    border-width: medium 0;
     
     p {
         margin: 0;
@@ -142,6 +162,17 @@ input:focus {
     background-color: var(--civilColor);
 }
 
+#playlistHolder {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 0.5em;
+    padding: 1em .4em 0 .4em;
+    background-color: var(--backgroundLighter);
+    border-top: medium solid var(--saBORbackground);
+    border-radius: 0 0 10px 10px;
+}
+
 body.game #playlistHolder {
     display: none;
 }
@@ -150,14 +181,20 @@ body.game #gameLog {
     display: unset;
 }
 
+body.game header {
+    display: none;
+}
+
 #bottomBar {
-    margin-top: auto;
     display: flex;
-    gap: 1em;
+    gap: .6em;
+    flex-shrink: 0;
+    margin-top: 0;
+    justify-content: end;
 }
 
 #hintCheckHolder p {
-    margin: auto 0 auto 0;
+    margin: auto auto auto 0;
 }
 
 #hintCheckHolder {
@@ -165,11 +202,34 @@ body.game #gameLog {
     gap: .4em;
 }
 
+#timerInput {
+    width: 100%;
+}
+
+.optionsHolder {
+    border-bottom: medium solid var(--saBORbackground);
+    margin-bottom: 1em;
+    border-radius: 5px;
+    padding: 0 .8em 1em;
+    
+    p {
+        margin-bottom: .4em;
+    }
+}
+
+.optionsHolder:last-child {
+    border-bottom: none;
+}
+
 .playerName {
     font-size: x-large;
     font-weight: bolder;
 }
 
+#timer {
+    font-size: xx-large;
+}
+
 .rainbowText {
     background: linear-gradient(to right, var(--foreground), var(--background), var(--foreground), var(--impostorColor), var(--foreground), var(--civilColor));    -webkit-background-clip: text;
     background-clip: text;
@@ -197,6 +257,6 @@ body.game #gameLog {
 
 @media (max-width: 720px) {
     body {
-        width: 96vw;
+        width: 100vw;
     }
 }