Mockup Giao Diện Web Game Bí Ẩn Nhật Bản

A polished responsive website UI mockup for a Japanese mystery game or archival story site titled "[月蝕綺譚]", displayed on a clean light gray background. Composition features a large desktop browser window occupying roughly 75% width on the left and a vertical smartphone screen occupying roughly 22% width on the right, both rendered in realistic device frames with soft drop shadows. Visual Style & Palette: Refined Japanese literary horror, archival mystery, and lunar night aesthetics. Color palette of aged ivory paper, sumi black ink, deep midnight navy, muted slate gray, and a vibrant vermilion red accent. Delicate serif Japanese typography, faint crescent orbit geometry, vintage document textures, and thin ruled borderlines. Desktop Interface: - Browser top bar in dark charcoal with three window control dots. - Ivory header with logo title "[月蝕綺譚]", a small red seal stamp, and navigation items: 「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, and a navy button 「メールで会員になる」. - Dark hero banner with a glowing lunar eclipse and vertical calligraphy title 「月蝕綺譚」. A semi-transparent archival UI overlay displays old documents, 5 miniature collectible artifact cards, and a bottom row of 5 horizontal preview strips (nocturnal street, blueprint room, classified folder, vintage manuscript, and investigator workspace map). - Right-side signup widget: Cream ticket-shaped card with semicircular notch cutouts and decorative ruling. Displays label 「入会札」, seal emblem, heading 「メールで会員になる」, email input field with placeholder text 「メールアドレスを入力」, red button 「登録する →」, and fine privacy text. - Lower content: Left column displays the headline "[物語の続きを、いちばん近くで。]" beside a slender vertical red rule and brief Japanese text. Right column shows three article cards: 1) 「月蝕綺譚 最新便」 with moon visual, red NEW badge, title 「大型アップデート『○○』を公開しました」, date 2024.05.20; 2) 「開発記録」 with journal image, title 「開発記録 #12：環境音の調整について」, date 2024.05.18; 3) 「ご意見箱」 with dark mailbox visual, title 「ご意見・ご感想をお聞かせください」, date 2024.05.16. - Dark navy footer with 6 text links (「お知らせ」, 「開発記録」, 「ご意見箱」, 「アーカイブ」, 「利用規約」, 「プライバシーポリシー」) and copyright 「© 2024 月蝕綺譚」. Mobile Screen Interface: Time reads 9:41. Clean mobile header with 「月蝕綺譚」 and hamburger menu. Stacked mobile layout showing the eclipse hero, 5 micro-thumbnails, the tagline "[物語の続きを、いちばん近くで。]", the cream ticket signup module, and the first news card with red NEW tag. Clean UI/UX presentation, razor-sharp kanji typography, consistent alignment, professional product showcase.