5 files changed, 23 insertions, 16 deletions

diff --git a/README.md b/README
index 05c9db8..05c9db8 100644
--- a/README.md
+++ b/README
diff --git a/play.css b/play.css
index 811a74b..3ae1280 100644
--- a/play.css
+++ b/play.css
@@ -39,31 +39,40 @@ header.your_turn { background-color: orange; }
 	width: 225px;
 	height: 350px;
 	border-radius: 12px;
+	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	transition: 100ms;
+	display: none;
+}
+
+.card.show {
+	display: block;
 }
 
 .card.enabled:hover {
 	transform: scale(1.1);
 }
 
-.small_card.prior {
+.card.prior {
 	filter: grayscale(100%);
 }
 
-.card, .small_card { background-color: white; }
-.card_back { background-color: #822c1f; }
+.card_back {
+	background-color: #822c1f;
+}
 
 .role_info { padding: 15px; }
-.small_card { width: 90px; height: 140px; border-radius: 5px; }
-.small_card:hover { width: 180px; height: 280px; border-radius: 10px; }
+.role_info .card { margin: 0 auto; }
+.role_info .card { width: 90px; height: 140px; border-radius: 5px; }
+.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; }
 
 @media (max-height: 800px) {
 	.role_info { padding: 15px 0 0 0; }
-	.small_card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; }
-	.small_card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
+	.role_info .card { width: 135px; height: 80px; border-radius: 8px 8px 0 0; }
+	.role_info .card:hover { width: 180px; height: 280px; border-radius: 10px; margin-bottom: 15px; }
 }
 
 @media (min-height: 1200px) {
-	.small_card { width: 180px; height: 280px; border-radius: 10px; }
+	.role_info .card { width: 180px; height: 280px; border-radius: 10px; }
 }
 
 /* BATTLE BOARD */
diff --git a/play.html b/play.html
index 21439d1..bd37f2f 100644
--- a/play.html
+++ b/play.html
@@ -75,7 +75,7 @@
 				<div class="role_vp" id="caesar_vp">VP</div>
 				<div class="role_user">-</div>
 			</div>
-			<div class="role_info"><div class="small_card card_back" id="caesar_card"></div></div>
+			<div class="role_info"><div class="show card card_back" id="caesar_card"></div></div>
 		</div>
 		<div class="role two">
 			<div class="role_name">
@@ -83,9 +83,7 @@
 				<div class="role_vp" id="pompeius_vp">VP</div>
 				<div class="role_user">-</div>
 			</div>
-			<div class="role_info">
-				<div class="small_card card_back" id="pompeius_card"></div>
-			</div>
+			<div class="role_info"><div class="show card card_back" id="pompeius_card"></div></div>
 		</div>
 		<div id="turn_info">-</div>
 	</div>
diff --git a/play.js b/play.js
index b57ee5b..52545f8 100644
--- a/play.js
+++ b/play.js
@@ -662,11 +662,11 @@ function update_battle() {
 
 function update_card_display(element, card, prior_card) {
 	if (!card && !prior_card) {
-		element.className = "small_card card_back";
+		element.className = "show card card_back";
 	} else if (prior_card) {
-		element.className = "small_card prior card_" + CARDS[prior_card].image;
+		element.className = "show card prior card_" + CARDS[prior_card].image;
 	} else {
-		element.className = "small_card card_" + CARDS[card].image;
+		element.className = "show card card_" + CARDS[card].image;
 	}
 }
 
diff --git a/title.sql b/title.sql
index bbb0e99..ccd65ab 100644
--- a/title.sql
+++ b/title.sql
@@ -1,3 +1,3 @@
-insert or replace into titles values ( 'julius-caesar', 'Julius Caesar', 37836 );
+insert or replace into titles ( title_id, title_name, bgg ) values ( 'julius-caesar', 'Julius Caesar', 37836 );
 insert or replace into roles values ( 'julius-caesar', 'Caesar' );
 insert or replace into roles values ( 'julius-caesar', 'Pompeius' );