5 files changed, 119 insertions, 12 deletions

diff --git a/styles/global.css b/styles/global.css
index 350a2a7..3c28cfc 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,5 @@
 :root {
-	--background: #E3E6EE;
+	--background: var(--gray-900);
 	--foreground: var(--gray-100);
 
 	--accent: #7E3AA6;
@@ -14,9 +14,10 @@
 	--gray-100: #141619;
 	--gray-200: #1F242D;
 	--gray-300: #293140;
-	--gray-700: #757D92;
-	--gray-800: #A9AFC0;
-	--gray-900: #CED2DC;
+	--gray-600: #757D92;
+	--gray-700: #A9AFC0;
+	--gray-800: #CED2DC;
+	--gray-900: #E3E6EE;
 
 	/* box-shadow */
 	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
@@ -150,3 +151,7 @@ input.light::placeholder { color: var(--text-alt); }
 	border-width: 2px;
 }
 
+.outcome.win { color: var(--disk-a-alt); }
+.outcome.lose { color: var(--disk-b-alt); }
+.outcome.draw { color: var(--gray-600); }
+
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..8ba12a6
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,72 @@
+.topbar * {
+	--squareSize: 90px;
+}
+
+.loginOrRegisterBox {
+	vertical-align: top;
+	height: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: 100%;
+	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
+
+.loginOrRegisterBox .inner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.loginOrRegisterBox .inner .registerMessage {
+	user-select: none;
+	display: inline-block;
+	margin: 0 auto;
+	min-width: 240px;
+	max-width: 350px;
+	text-align: center;
+}
+
+.loginOrRegisterBox .inner .button.register {
+	background-color: var(--gray-700);
+	color: var(--foreground);
+}
+
+.gamemode .icon {
+	font-size: 64px;
+	font-size: 64px;
+	height: 64px;
+	display: inline-block;
+	position: absolute;
+	top: var(--spacing-large);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.gamemode .text {
+	white-space: nowrap;
+	display: inline-block;
+	position: absolute;
+	bottom: var(--spacing-large);
+	left: 50%;
+	transform: translateX(-50%);
+	user-select: none;
+	font-weight: 500;
+}
+
+.topbar .gamemode {
+	--size: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: var(--size);
+	height: var(--size);
+}
+
+.topbar .profile .info {
+	left: calc(90px + 12px);
+	width: calc(100% - 90px - 12px);
+	height: 100%;
+}
+
+.topbar .profile .info .username { max-width: 178px; }
+.topbar .profile .info .score { margin-top: var(--spacing-small); }
+
+.topbar .profile .info .games .divider {
+	margin: 0 3px;
+}
+
diff --git a/styles/index.module.css b/styles/index.module.css
deleted file mode 100644
index 9b518ea..0000000
--- a/styles/index.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.loginOrRegisterBox {
-	--squareSize: 90px;
-	vertical-align: top;
-	height: calc(var(--squareSize) + 2 * var(--spacing-large));
-	width: 100%;
-	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
-}
diff --git a/styles/ui.css b/styles/ui.css
index d665044..f1d65e2 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -7,3 +7,15 @@
 
 .fullwidth { width: calc(100% - var(--spacing-medium)); }
 
+.button {
+	background-color: var(--accent);
+	color: var(--gray-900);
+	text-align: center;
+	cursor: pointer;
+	position: relative;
+	text-decoration: none;
+	display: block;
+	user-select: none;
+	font-weight: 600;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 753b88d..4331d3a 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -15,13 +15,38 @@
 .bg-800 { background-color: var(--gray-800); }
 .bg-900 { background-color: var(--gray-900); }
 
+.posabs { position: absolute; }
+.posrel { position: relative; }
+
+.t0 { top: 0; }
+.b0 { bottom: 0; }
+.r0 { right: 0; }
+.l0 { left: 0; }
+
+.h0 { left: 0; right: 0; }
+.v0 { top: 0; bottom: 0; }
+
+.a0 { top: 0; bottom: 0; left: 0; right: 0; }
+
 .subtile {
 	color: var(--gray-300);
 	font-style: italic;
 }
 
-/* no-select */
 .nosel {
 	user-select: none;
 	font-weight: 600;
 }
+
+.sidebyside {
+	display: grid;
+	grid-gap: var(--spacing-medium);
+	grid-auto-flow: column;
+}
+
+.truncate {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+