1 files changed, 53 insertions, 58 deletions

diff --git a/play.html b/play.html
index 4db62b2..d40bfd4 100644
--- a/play.html
+++ b/play.html
@@ -20,17 +20,18 @@
 	--pink: hsl(359, 81%, 78%);
 	--blue: hsl(211, 78%, 52%);
 	--dkblue: hsl(240, 69%, 57%);
-	--dkblue2: #04089f;
 
-	--fg-red: hsl(360, 77%, 31%);
-	--fg-pink: hsl(359, 81%, 58%);
-	--fg-blue: hsl(211, 78%, 32%);
-	--fg-dkblue: hsl(240, 69%, 37%);
+	--bg-red: hsl(360, 80%, 80%);
+	--bg-blue: hsl(211, 80%, 85%);
+	--fg-red: hsl(360, 100%, 35%);
+	--fg-dkblue: hsl(211, 100%, 25%);
+	--fg-pink: hsl(360, 75%, 60%);
+	--fg-blue: hsl(211, 75%, 50%);
 
-	--bg-red: hsl(360, 100%, 80%);
-	--bg-pink: hsl(360, 100%, 90%);
-	--bg-blue: hsl(210, 100%, 85%);
-	--bg-dkblue: hsl(220, 100%, 80%);
+	--xfg-red: hsl(360, 77%, 31%);
+	--xfg-pink: hsl(359, 81%, 58%);
+	--xfg-blue: hsl(211, 78%, 32%);
+	--xfg-dkblue: hsl(240, 69%, 37%);
 
 	--hi-red: hsl(360, 77%, 61%);
 	--hi-pink: hsl(359, 81%, 83%);
@@ -54,6 +55,30 @@
 .role.blue { background-color: #8bf }
 .role.red { background-color: #f88 }
 
+#tooltip {
+	pointer-events: none;
+	position: fixed;
+	z-index: 600;
+	right: 240px;
+	top: 60px;
+	width: 242px;
+	height: 338px;
+}
+
+#tooltip:empty {
+	display: none;
+}
+
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
+}
+
 /* LOG */
 
 #log .h1 {
@@ -80,18 +105,31 @@
 	padding: 2px 8px;
 }
 
-#log .p1, #log .p2 {
+#log .h3 {
 	text-align: right;
 	background-color: wheat;
 	margin: 8px 0;
 }
 
+#log .h3.red {
+	background-color: var(--bg-red);
+}
+
+#log .h3.blue {
+	background-color: var(--bg-blue);
+}
+
 #log div { padding-left: 20px; text-indent: -12px; }
 #log div.i1 { padding-left: 32px; text-indent: -12px; }
 #log div.i2 { padding-left: 44px; text-indent: -12px; }
 
-#log img {
+#log .img {
 	padding: 0;
+	text-indent: 0;
+	min-height: 0;
+}
+
+#log img {
 	max-width: 100%;
 }
 
@@ -106,56 +144,12 @@
 	padding-left: 8px;
 }
 
-/*
-#log .n { padding: 0 3px }
-#log .blue, #log .dkblue { background-color: lightskyblue; }
-#log .red, #log .pink { background-color: pink; }
-*/
-
-/*
-#log .n.dkblue::before { content: "\2660 "; color: var(--dkblue2); }
-#log .n.blue::before { content: "\2663 "; color: var(--blue); }
-#log .n.red::before { content: "\2665 "; color: var(--red); }
-#log .n.pink::before { content: "\2666 "; color: var(--pink); }
-*/
-
-/*
-#log .n.dkblue::before { content: "\25fe"; color: var(--dkblue2); }
-#log .n.blue::before { content: "\25fe"; color: var(--blue); }
-#log .n.red::before { content: "\25fe"; color: var(--red); }
-#log .n.pink::before { content: "\25fe"; color: var(--pink); }
-*/
-
-/*
-#log .n.dkblue::after { content: "\25b6"; color: var(--dkblue2); }
-#log .n.blue::after { content: "\25b6"; color: var(--blue); }
-#log .n.red::after { content: "\25b6"; color: var(--red); }
-#log .n.pink::after { content: "\25b6"; color: var(--pink); }
-#log .n.dkblue::before { content: "\25c0"; color: var(--dkblue2); }
-#log .n.blue::before { content: "\25c0"; color: var(--blue); }
-#log .n.red::before { content: "\25c0"; color: var(--red); }
-#log .n.pink::before { content: "\25c0"; color: var(--pink); }
-#log .n.dkblue { text-decoration: 1px underline var(--dkblue2); }
-#log .n.blue { text-decoration: 1px underline var(--blue); }
-#log .n.red { text-decoration: 1px underline var(--red); }
-#log .n.pink { text-decoration: 1px underline var(--pink); }
-*/
-
-
-#log .n { padding: 0 3px }
-#log .n.dkblue { background-color: var(--bg-dkblue); }
-#log .n.blue { background-color: var(--bg-blue); }
-#log .n.red { background-color: var(--bg-red); }
-#log .n.pink { background-color: var(--bg-pink); }
-/*
-*/
-
-/*
+X#log .n { font-style: italic; }
+#log .n:hover { text-decoration: underline; }
 #log .n.dkblue { color: var(--fg-dkblue); }
 #log .n.blue { color: var(--fg-blue); }
 #log .n.red { color: var(--fg-red); }
 #log .n.pink { color: var(--fg-pink); }
-*/
 
 .mini {
 	display: inline-block;
@@ -166,7 +160,7 @@
 	background-size: 600% 100%;
 	background-repeat: no-repeat;
 	background-image: url(images/die_black_pips.svg);
-	background-color: #ccc;
+	background-color: #ddd;
 	border: 1px solid black;
 }
 
@@ -476,6 +470,7 @@ body.shift .card .number { display: block; }
 
 </main>
 
+<div id="tooltip"></div>
 <footer id="status"></footer>
 
 </body>