Use multiples of four for UI sizes.

2 files changed, 45 insertions, 40 deletions

diff --git a/public/common/columbia.css b/public/common/columbia.css
index 78bb61c..eba9b5b 100644
--- a/public/common/columbia.css
+++ b/public/common/columbia.css
@@ -3,8 +3,8 @@
 #battle {
 	position: absolute;
 	min-width: 450px;
-	left: 10px;
-	top: 55px;
+	left: 12px;
+	top: 56px;
 	z-index: 50;
 	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
 	background-color: white;
@@ -40,13 +40,8 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
-	padding: 15px;
-	gap: 5px
-}
-
-#FR, #ER {
-	padding: 10px 15px;
-	min-height: 10px;
+	padding: 12px;
+	gap: 4px
 }
 
 #FR .battle_menu_list, #ER .battle_menu_list {
@@ -65,7 +60,7 @@
 	display: none;
 	width: 20px;
 	height: 20px;
-	border-radius: 5px;
+	border-radius: 4px;
 	padding: 3px;
 }
 
@@ -73,7 +68,7 @@
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
-	margin-top: 5px;
+	margin-top: 4px;
 	min-height: 26px;
 }
 
@@ -95,7 +90,7 @@
 
 /* MOBILE PHONE LAYOUT */
 
-@media (max-width: 500px) {
+@media (max-width: 640px) {
 	#battle {
 		position: static;
 		grid-column: 1;
diff --git a/public/common/play.css b/public/common/play.css
index c19ea6c..661d0f7 100644
--- a/public/common/play.css
+++ b/public/common/play.css
@@ -77,7 +77,7 @@ header {
 	align-items: center;
 	border-bottom: 1px solid black;
 	background-color: gainsboro;
-	padding-right: 10px;
+	padding-right: 8px;
 }
 
 #toolbar {
@@ -106,7 +106,7 @@ aside {
 	display: grid;
 	overflow: clip;
 	grid-template-rows: auto minmax(0, 1fr);
-	width: 210px;
+	width: 212px;
 	border-left: 1px solid black;
 }
 
@@ -144,6 +144,7 @@ aside {
 
 footer {
 	position: fixed;
+	pointer-events: none;
 	z-index: 500;
 	bottom: 0;
 	background-color: white;
@@ -161,8 +162,8 @@ footer {
 }
 .menu_title img {
 	display: block;
-	height: 35px;
-	padding: 5px;
+	height: 36px;
+	padding: 4px;
 }
 .menu:hover .menu_title {
 	background-color: black;
@@ -174,7 +175,7 @@ footer {
 .menu_popup {
 	display: none;
 	position: absolute;
-	min-width: 20ex;
+	min-width: 160px;
 	white-space: nowrap;
 	border: 1px solid black;
 	background-color: white;
@@ -187,7 +188,7 @@ footer {
 	border-top: 1px solid black;
 }
 .menu_item {
-	padding: 5px 10px;
+	padding: 4px 8px;
 }
 .menu_item:hover {
 	background-color: black;
@@ -204,8 +205,8 @@ footer {
 }
 .icon_button img {
 	display: block;
-	height: 35px;
-	padding: 5px;
+	height: 36px;
+	padding: 4px;
 }
 .icon_button:hover {
 	background-color: black;
@@ -219,17 +220,17 @@ header #actions {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: end;
-	gap: 10px;
-	padding-left: 10px;
-	margin: 5px 0;
+	gap: 8px;
+	padding-left: 8px;
+	margin: 4px 0;
 }
 
 header .replay {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: end;
-	padding-left: 10px;
-	margin: 5px 0;
+	padding-left: 8px;
+	margin: 4px 0;
 }
 
 header .replay button {
@@ -255,8 +256,8 @@ header .replay button {
 	border-bottom: 1px solid black;
 	padding-top: 3px;
 	padding-bottom: 3px;
-	padding-left: 5px;
-	padding-right: 5px;
+	padding-left: 4px;
+	padding-right: 4px;
 }
 
 .role_user {
@@ -301,13 +302,13 @@ header .replay button {
 
 #chat_window {
 	position: absolute;
-	left: 10px;
-	top: 55px;
-	width: 40rem;
+	left: 12px;
+	top: 56px;
+	width: 640px;
 	z-index: 500;
 	border: 1px solid black;
 	background-color: white;
-	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
+	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.5);
 	visibility: hidden;
 }
 
@@ -320,7 +321,7 @@ header .replay button {
 	cursor: move;
 	background-color: gainsboro;
 	border-bottom: 1px solid black;
-	padding: 5px 10px;
+	padding: 4px 8px;
 }
 
 #chat_x {
@@ -328,7 +329,7 @@ header .replay button {
 	cursor: pointer;
 	float: right;
 	padding: 0px 2px;
-	margin: 5px 5px;
+	margin: 4px 4px;
 }
 
 #chat_x:hover {
@@ -340,7 +341,7 @@ header .replay button {
 	font-size: 16px;
 	line-height: 24px;
 	height: 216px;
-	padding: 0px 5px;
+	padding: 0px 4px;
 	overflow-y: scroll;
 }
 
@@ -360,13 +361,13 @@ header .replay button {
 	width: 100%;
 	outline: none;
 	border: none;
-	padding: 5px;
-	font-size: 1rem;
+	padding: 4px;
+	font-size: 16px;
 }
 
 /* MOBILE PHONE LAYOUT */
 
-@media (max-width: 500px) {
+@media (max-width: 640px) {
 	body {
 		width: 100%;
 		height: auto;
@@ -375,9 +376,18 @@ header .replay button {
 		overflow-x: clip;
 		overflow-y: auto;
 	}
-	footer { width: 100%; background-color: rgba(255,255,255,0.5) }
-	header { display: block; }
-	#prompt { padding-left: 10px; display: block; white-space: normal; }
+	footer {
+		width: 100%;
+		background-color: rgba(255,255,255,0.9);
+	}
+	header {
+		display: block;
+	}
+	#prompt {
+		padding-left: 8px;
+		display: block;
+		white-space: normal;
+	}
 
 	#chat_window {
 		position: static;