Better mobile + desktop styling (untested)

src/App.css

@@ -44,20 +44,21 @@ button:active {
   white-space: nowrap;
 }
 
-.list {
+.mobile .list {
   background-color: #484848;
   border-radius: 16px;
   padding: 16px 0px;
+  margin-top: 4rem;
 }
 
-.list .item {
+.mobile .list .item {
   display: flex;
   justify-content: space-between;
   padding: 0 16px;
   position: relative;
 }
 
-.list .item + .item::before {
+.mobile .list .item + .item::before {
   content: "";
   position: absolute;
   top: -16px;
@@ -67,6 +68,33 @@ button:active {
   background-color: rgb(128, 128, 128);
 }
 
-.list .item + .item {
+.mobile .list .item + .item {
   margin-top: 32px;
 }
+
+.desktop .list {
+  font-size: 16px;
+  border-radius: 16px;
+  margin-top: 4rem;
+}
+
+.desktop .list .item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+  position: relative;
+}
+
+.desktop .list .item + .item::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 8px;
+  right: 8px;
+  height: 1px;
+  background-color: rgb(128, 128, 128);
+}
+
+.desktop .list .item + .item {
+  margin-top: 16px;
+}

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react"
 import "./App.css"
-import '@fontsource/lexend'
+import "@fontsource/lexend"
 import { platform } from "@tauri-apps/plugin-os"
 
 function App() {
@@ -10,7 +10,12 @@ function App() {
 
   useEffect(() => {
     if (initialized.current) return;
-    if (platform() == 'macos') document.body.classList.add('macos-body')
+    if (platform() == "macos") document.body.classList.add("macos-body");
+    if (platform() == "ios" || platform() == "android") {
+      document.body.classList.add("mobile");
+    } else {
+      document.body.classList.add("desktop");
+    }
     refresh();
     initialized.current = true;
   }, [])
@@ -44,7 +49,7 @@ function App() {
           {players.map(([user, score], i) => (
             <div className="item" key={i}>
               <span>{user}</span>
-              <span>{Number(score).toLocaleString()}</span>
+              <span style={{ fontWeight: "bold" }}>{Number(score).toLocaleString()}</span>
             </div>
           ))}
         </div>