fix: full-screen menu, centered content, collapse hidden view, corner How-to-Play

- #menu-view fills the viewport (100vh) and centers title+buttons as one group
- menu bg/scrim/grain/vig become position:fixed so they cover the whole screen
instead of only the title block's band
- force display:none on the hidden menu/game column (id-specificity was beating
Gradio's hide class, leaving a black gap above the game on entry)
- pin How to Play to the top-right corner

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

styles.css

@@ -864,18 +864,24 @@ footer { display: none !important; }
 /* ── 23. Opening menu — Direction C ── */
 #menu-view {
     position: relative;
-    min-height: 560px;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: center;   /* center title+buttons as one vertical group */
     overflow: hidden;
     border: none !important;
     background: #04040a;
 }
 
+/* Gradio hides a visible=False column via a class; our id-level display:flex
+   would otherwise win on specificity and the hidden menu keeps reserving its
+   min-height (a black gap above the game). Force the collapse. */
+#menu-view.hide, #menu-view.hidden,
+#game-view.hide, #game-view.hidden { display: none !important; }
+
 .menu-bg {
-    position: absolute;
+    position: fixed;
     inset: 0;
     background-size: cover;
     background-position: center 38%;
@@ -883,7 +889,7 @@ footer { display: none !important; }
 }
 
 .menu-scrim {
-    position: absolute;
+    position: fixed;
     inset: 0;
     background: radial-gradient(ellipse at 50% 30%, transparent 25%, rgba(4,4,10,0.92) 100%);
     pointer-events: none;
@@ -891,7 +897,7 @@ footer { display: none !important; }
 }
 
 .menu-grain {
-    position: absolute;
+    position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 2;
@@ -900,7 +906,7 @@ footer { display: none !important; }
 }
 
 .menu-vig {
-    position: absolute;
+    position: fixed;
     inset: 0;
     pointer-events: none;
     z-index: 2;
@@ -911,7 +917,7 @@ footer { display: none !important; }
     position: relative;
     z-index: 3;
     text-align: center;
-    padding-top: 84px;
+    padding-top: 0;
     font-family: Georgia, serif;
 }
 
@@ -994,10 +1000,10 @@ footer { display: none !important; }
 }
 
 #btn-howto {
-    position: absolute;
-    top: 18px;
-    right: 18px;
-    z-index: 5;
+    position: fixed;
+    top: 16px;
+    right: 20px;
+    z-index: 6;
     font-size: 0.82rem !important;
     letter-spacing: 0.14em !important;
     color: #8a7aa2 !important;
@@ -1010,7 +1016,7 @@ footer { display: none !important; }
 }
 
 #btn-tester, #btn-full {
-    margin-top: 44px !important;
+    margin-top: 24px !important;
 }
 
 /* ── 24. How to Play overlay ── */