Add Makima modal

1 files changed, 44 insertions, 0 deletions

diff --git a/frontend/src/styles/pc98.css b/frontend/src/styles/pc98.css
index 83b9c1e..710d11a 100644
--- a/frontend/src/styles/pc98.css
+++ b/frontend/src/styles/pc98.css
@@ -1903,6 +1903,50 @@ button:focus-visible {
   0%   { object-position: 50% 0%; }
   100% { object-position: 50% 100%; }
 }
+
+.makima-screen {
+  grid-template-rows: auto auto auto;
+  gap: 14px;
+}
+
+.makima-headline {
+  color: #d6f2ff;
+  letter-spacing: 0.75px;
+}
+
+.makima-logo {
+  object-fit: contain;
+  background: radial-gradient(circle at 30% 30%, rgba(102, 204, 255, 0.16), transparent 40%), rgba(0, 16, 40, 0.65);
+  padding: 22px;
+  border: 2px solid #66ccff;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(102, 204, 255, 0.25);
+}
+
+.makima-screen .mission-paragraph {
+  color: #e2f6ff;
+}
+
+.makima-value strong {
+  display: block;
+  margin-bottom: 6px;
+  color: #9fe3ff;
+  letter-spacing: 0.4px;
+  font-size: 13px;
+}
+
+.makima-list {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 6px;
+}
+
+.makima-list li {
+  color: #d8f3ff;
+  font-family: 'MS Gothic', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
 .hero-frame {
   position: relative;
   width: 100%;