MAPG-73 show header with link on the gaming screen

move round info to the new header

public/static/css/mapguesser.css

@@ -22,10 +22,17 @@ h1, h2 {
 
 h1 {
     font-size: 32px;
-    line-height: inherit;
 }
 
-h2 {
+h1>a:link, h1>a:visited {
+    color: inherit;
+}
+
+h1>a:hover, h1>a:focus {
+    text-decoration: none;
+}
+
+h2, div.header.small h1 {
     font-size: 24px;
 }
 
@@ -77,7 +84,7 @@ a:link, a:visited {
     text-decoration: none;
 }
 
-a:hover {
+a:hover, a:focus {
     text-decoration: underline;
 }
 
@@ -129,6 +136,16 @@ div.header {
     color: white;
 }
 
+div.header > div.grid {
+    display: grid;
+    grid-template-columns: auto auto;
+}
+
+div.header.small {
+    height: 40px;
+    line-height: 40px;
+}
+
 div.main {
     padding: 6px 12px;
 }
@@ -194,17 +211,8 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
 }
 
 #roundInfo {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    height: 28px;
-    line-height: 28px;
-    padding: 0 8px;
-    background-color: #eeeeee;
-    border: solid 1px #555555;
-    border-radius: 3px;
-    opacity: 0.95;
-    z-index: 2;
+    line-height: inherit;
+    text-align: right;
 }
 
 #roundInfo p {
@@ -214,7 +222,7 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
 
 #panorama {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 40px);
     z-index: 1;
 }
 
@@ -323,6 +331,9 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
 }
 
 @media screen and (max-width: 599px) {
+    div.header.small h1 span {
+        display: none;
+    }
     button {
         padding: 0;
         width: 100%;
@@ -336,7 +347,7 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     }
     #guess {
         left: 20px;
-        top: 40px;
+        top: 50px;
         opacity: 0.95;
         visibility: hidden;
     }
@@ -381,7 +392,7 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     #guess.result {
         width: initial;
         height: initial;
-        top: 40px;
+        top: 50px;
         left: 50px;
         right: 50px;
         bottom: 50px;
@@ -391,11 +402,11 @@ div.mapItem>div.inner>div.info>p:nth-child(2) {
     }
     @media screen and (max-height: 424px) {
         #guess {
-            top: 40px;
+            top: 50px;
             height: initial;
         }
         #guess.adapt:hover {
-            top: 40px;
+            top: 50px;
             height: initial;
         }
         #guess.result {