Unify phase titles and improve readability on beige theme

wwwroot/app.js

@@ -275,7 +275,10 @@ function renderResults() {
     `;
     tbody.appendChild(row);
   });
-  container.appendChild(table);
+  const frame = document.createElement("div");
+  frame.className = "results-frame";
+  frame.appendChild(table);
+  container.appendChild(frame);
   container.querySelectorAll(".clickable-thumb").forEach(img => {
     img.addEventListener("click", () => openLightbox(img.src, img.alt));
   });

wwwroot/index.html

@@ -77,9 +77,11 @@
   <main class="grid">
     <section id="actions-card">
       <div id="suggest-view" class="phase-view hidden">
-        <div class="card">
+        <div class="phase-header">
           <h2 data-i18n="suggest.title">Suggest (up to 5)</h2>
           <p class="hint" data-i18n="suggest.hint">Only you can see your suggestions until Reveal.</p>
+        </div>
+        <div class="card">
           <form id="suggest-form" class="stack">
             <label class="stack">
               <span class="label" data-i18n="form.gameName">Game name *</span>
@@ -128,17 +130,23 @@
       </div>
 
       <div id="reveal-view" class="phase-view hidden">
+        <div class="phase-header">
           <h2 data-i18n="section.allSuggestions">All Suggestions</h2>
+        </div>
         <div id="all-suggestions" class="card-grid"></div>
       </div>
 
       <div id="vote-view" class="phase-view hidden">
+        <div class="phase-header">
           <h2 data-i18n="section.vote">Vote 0–10</h2>
+        </div>
         <div id="vote-list" class="card-grid"></div>
       </div>
 
       <div id="results-view" class="phase-view hidden">
+        <div class="phase-header">
           <h2 data-i18n="section.results">Results</h2>
+        </div>
         <div id="results-list" class="card-grid results-grid"></div>
       </div>
     </section>

wwwroot/styles.css

@@ -58,6 +58,21 @@
   min-width: 1280px;
 }
 
+.phase-header {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid #e3d4bd;
+  border-radius: 12px;
+  padding: 12px 16px;
+  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.phase-header h2 { margin: 0; }
+.phase-header .hint { margin: 0; }
+
 .card {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid #e3d4bd;
@@ -147,6 +162,14 @@ button.ghost { background: transparent; border-color: #d5c7b5; color: #2c1c0d; }
 
 .results-grid .game-card { border-color: #f0c56b; }
 
+.results-frame {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid #e3d4bd;
+  border-radius: 14px;
+  padding: 12px;
+  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
+}
+
 /* Slider */
 input[type="range"].full-slider {
   -webkit-appearance: none;