Update masthead look

2 files changed, 87 insertions, 15 deletions

diff --git a/frontend/public/PC98Doukuusei.webp b/frontend/public/PC98Doukuusei.webp
new file mode 100644
index 0000000..7d6a09c
--- /dev/null
+++ b/frontend/public/PC98Doukuusei.webp
diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index 39b8392..83e4e29 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -649,6 +649,52 @@ button:focus-visible {
 .bottom-stats { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; z-index: 2; pointer-events: none; }
 .bottom-stats .rf-stats { background: rgba(10, 12, 20, 0.55); border: 1px solid rgba(102,204,255,0.6); padding: 8px 12px; border-radius: 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); margin: 0; pointer-events: auto; }
 
+/* PC-98 style masthead and volume badge (cleaner, less comic) */
+.modern-landing-page.manga-style .masthead { align-items: flex-start; gap: 10px; }
+.modern-landing-page.manga-style .masthead-vertical {
+  background: linear-gradient(180deg, #000033 0%, #000016 100%);
+  color: #cfefff;
+  border: 2px solid #66ccff;
+  box-shadow: inset 0 0 0 1px #001a33, 2px 2px 0 rgba(0,0,0,0.35);
+  font-family: 'MS Gothic', 'DotGothic16', monospace;
+  letter-spacing: 1px;
+  padding: 12px 8px;
+  position: relative;
+}
+.modern-landing-page.manga-style .masthead-vertical::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
+  opacity: 0.2;
+  pointer-events: none;
+}
+.modern-landing-page.manga-style .masthead-vertical .jp { font-size: 28px; line-height: 1; text-shadow: 1px 1px 0 #000; }
+.modern-landing-page.manga-style .masthead-vertical .en { font-size: 10px; margin-top: 6px; opacity: 0.9; letter-spacing: 1px; }
+
+.modern-landing-page.manga-style .issue-badge {
+  background: #000013;
+  color: #cfefff;
+  border: 2px solid #66ccff;
+  padding: 6px 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: 'MS Gothic', monospace;
+  box-shadow: inset 0 0 0 1px #001a33, 2px 2px 0 rgba(0,0,0,0.35);
+}
+.modern-landing-page.manga-style .issue-badge::before {
+  content: '';
+  position: static;
+  width: 6px;
+  height: 6px;
+  background: #66ff00;
+  border: 1px solid #003311;
+  box-shadow: 0 0 6px #66ff00;
+  display: inline-block;
+}
+.modern-landing-page.manga-style .issue-badge::after { content: none; }
+
 /* Floating Header Bar */
 .floating-header {
   position: fixed;
@@ -1688,28 +1734,54 @@ button:focus-visible {
 }
 
 /* Masthead */
-.masthead { grid-area: masthead; display: flex; flex-direction: column; align-items: center; gap: 18px; }
+.masthead { grid-area: masthead; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
 .masthead-vertical {
+  position: relative;
   writing-mode: vertical-rl;
   text-orientation: mixed;
-  font-family: 'DotGothic16', system-ui, sans-serif;
-  background: linear-gradient(180deg, var(--ink) 0%, #000 100%);
-  color: #fff;
-  border: 6px double #fff;
-  box-shadow: 0 12px 30px var(--shadow);
-  padding: 24px 10px;
-  letter-spacing: 4px;
+  font-family: 'MS Gothic', 'DotGothic16', monospace;
+  background: linear-gradient(180deg, #000032 0%, #000018 100%);
+  color: #cfefff;
+  border: 2px solid #66ccff;
+  box-shadow:
+    inset 0 0 0 2px rgba(0,0,0,0.6),
+    0 0 0 2px rgba(102,204,255,0.2),
+    4px 4px 0 rgba(0,0,0,0.35);
+  padding: 14px 8px;
+  letter-spacing: 2px;
+}
+.masthead-vertical::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px);
+  pointer-events: none;
+  opacity: 0.25;
+  mix-blend-mode: screen;
 }
-.masthead-vertical .jp { font-size: 42px; line-height: 1; }
-.masthead-vertical .en { font-size: 12px; margin-top: 10px; opacity: 0.8; letter-spacing: 2px; }
+.masthead-vertical .jp { font-size: 28px; line-height: 1; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; }
+.masthead-vertical .en { font-size: 10px; margin-top: 8px; opacity: 0.9; letter-spacing: 1px; }
 .issue-badge {
-  background: var(--mustard);
-  color: #1a0f08;
-  font-family: 'Noto Serif JP', serif;
+  background: #000013;
+  color: #9fe3ff;
+  font-family: 'MS Gothic', monospace;
   font-weight: 700;
   padding: 6px 10px;
-  border: 2px solid var(--ink);
-  box-shadow: 2px 2px 0 rgba(26,15,8,0.25);
+  border: 2px solid #66ccff;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.55), 3px 3px 0 rgba(0,0,0,0.35);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.issue-badge::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  background: #00ff66;
+  box-shadow: 0 0 6px #00ff66;
+  border: 1px solid #003311;
 }
 
 /* Hero */