fix(frontend): align legacy title, selector and grid contracts

Ref keeps the page title row at its default alignment and centres only the
heading, rules the yearbook selector row with 1px gray edges, and lets the log
panels overflow instead of clipping. The shared Lumen control family gets Ref's
middle baseline, and the general grid drops a bottom rule and clip that Ref does
not have.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/game-frontend/src/assets/styles/legacy-controls.css

@@ -61,6 +61,8 @@
     background: var(--legacy-button-bg);
     color: #fff;
     line-height: 21px;
+    /* Ref's framework baseline for these controls. */
+    vertical-align: middle;
 }
 
 .legacy-button.legacy-button--secondary {

app/game-frontend/src/views/GlobalInfoView.vue

@@ -152,9 +152,14 @@ onMounted(async () => {
     position: relative;
     width: 100%;
     height: 32px;
-    text-align: center;
+    text-align: left;
     background-image: var(--sammo-texture-walnut);
 }
+
+.legacy-title > strong {
+    display: block;
+    text-align: center;
+}
 .legacy-title strong {
     font-size: 24px;
     font-weight: 400;
@@ -209,7 +214,8 @@ onMounted(async () => {
     transform-origin: top;
 }
 .matrix th {
-    font-weight: 400;
+    padding: 1px;
+    font-weight: 700;
 }
 .matrix .vertical {
     writing-mode: vertical-rl;
@@ -303,7 +309,8 @@ onMounted(async () => {
     width: 15%;
 }
 .footer {
-    box-sizing: content-box;
+    box-sizing: border-box;
+    text-align: left;
     height: 35.5px;
     margin-top: 0;
     padding: 20px 0 0;

app/game-frontend/src/views/NationGeneralsView.vue

@@ -222,7 +222,6 @@ onMounted(load);
     max-width: 1000px;
     height: 100vh;
     margin: 0 auto;
-    overflow: hidden;
     font: 14px/21px var(--sammo-font-sans);
     color: #fff;
     background-color: transparent;
@@ -238,7 +237,7 @@ onMounted(load);
     justify-content: center;
     background-color: transparent;
     background-image: var(--sammo-texture-walnut);
-    border-bottom: 1px solid #42484a;
+    /* Ref's `.back_bar` has no bottom rule; the grid below draws its own. */
     font-size: 14px;
 }
 .top-bar strong {

app/game-frontend/src/views/NationSecretView.vue

@@ -259,10 +259,11 @@ select {
 .summary th {
     width: 120px;
 }
+/* Ref collapses this list table; `separate` shifted every row by the spacing. */
 .list {
     width: 974px;
     margin: 0 auto;
-    border-collapse: separate;
+    border-collapse: collapse;
     table-layout: auto;
 }
 .list th,

app/game-frontend/src/views/YearbookView.vue

@@ -236,14 +236,20 @@ onMounted(async () => {
     background-color: transparent;
 }
 
+/* Ref's `.back_bar` keeps default text alignment; only the heading centres. */
 .yearbook-title {
     position: relative;
     min-height: 32px;
-    text-align: center;
+    text-align: left;
     line-height: 21px;
     background-color: transparent;
 }
 
+.yearbook-title > strong {
+    display: block;
+    text-align: center;
+}
+
 .yearbook-title strong {
     display: inline-block;
     line-height: 32px;
@@ -283,6 +289,7 @@ onMounted(async () => {
     border: 1px solid gray;
 }
 
+/* Ref's selector row is a `.center.row` with 1px gray rules above and below. */
 .year-selector {
     display: grid;
     grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
@@ -290,8 +297,10 @@ onMounted(async () => {
     align-items: center;
     gap: 4px;
     min-height: 37.5px;
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
     padding: 0;
-    text-align: right;
+    text-align: center;
 }
 
 .year-selector select {
@@ -352,7 +361,6 @@ onMounted(async () => {
 
 .history-log {
     grid-column: 1 / -1;
-    overflow: hidden;
 }
 .history-log:first-of-type {
     height: 128px;