Frontend: mission screen transform with dimming, auto-pan image; hide stats in mission mode

1 files changed, 83 insertions, 1 deletions

diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index c7d6fb6..f4b9450 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -1713,7 +1713,16 @@ button:focus-visible {
   --shadow: rgba(26, 15, 8, 0.25);
 }
 
-.taisho-cover .cover-backdrop { display: none; }
+.taisho-cover .cover-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 0;
+  display: none;
+}
+.taisho-cover.mission-mode .cover-backdrop { display: block; }
 
 .taisho-cover .paper-tone {
   position: absolute;
@@ -1758,6 +1767,21 @@ button:focus-visible {
   padding: 40px 48px;
 }
 
+/* Mission mode adjusts spacing and masthead presence */
+.taisho-cover.mission-mode .cover-content {
+  gap: 20px;
+  padding: 36px 44px;
+}
+.taisho-cover.mission-mode .masthead-vertical {
+  transform: translateX(-4px) scale(0.96);
+  transition: transform 220ms ease, box-shadow 220ms ease;
+  box-shadow:
+    inset 0 0 0 2px rgba(0,0,0,0.6),
+    0 0 0 2px rgba(102,204,255,0.2),
+    2px 2px 0 rgba(0,0,0,0.35);
+}
+.taisho-cover.mission-mode .issue-badge { transform: translateY(-2px); transition: transform 220ms ease; }
+
 /* Masthead */
 .masthead { grid-area: masthead; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
 .masthead-vertical {
@@ -1774,6 +1798,7 @@ button:focus-visible {
     4px 4px 0 rgba(0,0,0,0.35);
   padding: 14px 8px;
   letter-spacing: 2px;
+  transition: transform 220ms ease;
 }
 .masthead-vertical::after {
   content: '';
@@ -1811,6 +1836,62 @@ button:focus-visible {
 
 /* Hero */
 .hero { grid-area: hero; display: flex; align-items: center; justify-content: center; }
+
+/* Mission screen replaces hero in mission mode */
+.mission-screen {
+  grid-area: hero;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  align-content: start;
+  gap: 16px;
+  animation: fadeIn 200ms ease;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.mission-headline {
+  font-family: 'Sylfaen', serif;
+  font-weight: 700;
+  font-size: 28px;
+  color: #eaf7ff;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
+  letter-spacing: 0.5px;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mission-image {
+  width: 100%;
+  height: clamp(160px, 38vh, 400px);
+  object-fit: cover;
+  object-position: 50% 0%;
+  border: 2px solid #66ccff;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
+  animation: mission-pan 22s ease-in-out infinite alternate;
+  will-change: object-position;
+}
+
+.mission-paragraph {
+  font-family: 'MS Gothic', monospace;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #cfefff;
+  margin: 0;
+}
+
+@media (max-width: 768px) {
+  .taisho-cover.mission-mode .cover-content { gap: 14px; padding: 20px 16px 120px; }
+  .mission-headline { font-size: 18px; white-space: normal; text-overflow: initial; }
+  .mission-image { height: clamp(120px, 26vh, 220px); animation: mission-pan 20s ease-in-out infinite alternate; }
+  .mission-paragraph { font-size: 13px; }
+}
+
+@keyframes mission-pan {
+  0%   { object-position: 50% 0%; }
+  100% { object-position: 50% 100%; }
+}
 .hero-frame {
   position: relative;
   width: 100%;
@@ -3660,6 +3741,7 @@ button:focus-visible {
   animation: fadeIn 0.3s ease;
 }
 
+
 .settings-modal {
   background: rgba(0, 0, 0, 0.95);
   border: 2px solid rgba(102, 204, 255, 0.5);