.game-dev font-size: 0.7rem; color: #7f9fc9; text-transform: uppercase; font-family: monospace;
.size-badge background: #07121b; display: inline-block; padding: 0.2rem 0.7rem; border-radius: 40px; font-size: 0.7rem; margin-top: 0.6rem; color: #8cb3db;
/* wiiware style icon mockup */ .game-icon width: 110px; height: 110px; margin: 0 auto 1rem; background: linear-gradient(145deg, #1e2a36, #0c141f); border-radius: 28px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 5px 12px black; border: 1px solid #2f6080; transition: 0.1s linear;
/* header with ghostware identity */ .brand display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; border-bottom: 2px solid #2c5f8a; padding-bottom: 0.75rem; margin-bottom: 2rem; wiiware collection by ghostware
.close-modal background: #1f3f5c; border: none; padding: 0.6rem 1.5rem; border-radius: 40px; color: white; font-weight: bold; margin-top: 1rem; cursor: pointer; font-family: monospace;
.game-title font-weight: bold; font-size: 1.2rem; letter-spacing: -0.3px; margin: 0.5rem 0 0.2rem; color: #e1f0ff;
<script> // Ghostware's fictional WiiWare Collection const wiiwareGames = [ id: 0, title: "NEBULA RACER", genre: "Arcade Racer", size: "187 blocks", desc: "Drift through ghostly nebulae. Time-trial mayhem with 4-player ghost data.", icon: "🏁🌌" , id: 1, title: "SHADOW PUZZLE", genre: "Logic", size: "93 blocks", desc: "Manipulate light & shadows to solve 120 haunting puzzles. Calm but eerie.", icon: "🧩🌑" , id: 2, title: "SPECTER SABERS", genre: "Action", size: "241 blocks", desc: "Slice spectral enemies with motion controls. Co-op ghost-slashing.", icon: "⚔️👻" , id: 3, title: "CRYPT CRAWLER", genre: "Dungeon RPG", size: "312 blocks", desc: "Roguelike dungeon crawler. Retro pixel art & permadeath.", icon: "🗝️🕯️" , id: 4, title: "WIIWARE PARTY", genre: "Party", size: "456 blocks", desc: "4-player mini-games: ghost bowling, haunted whack-a-mole.", icon: "🎉👾" , id: 5, title: "ECHO CHAMBER", genre: "Rhythm", size: "129 blocks", desc: "Musical memory game. Compose loops using Wii Remote pointer.", icon: "🎶🌀" , id: 6, title: "FROSTBITE FLIGHT", genre: "Flight", size: "210 blocks", desc: "Pilot a paper plane through frozen tundras. Relaxing wind physics.", icon: "❄️✈️" , id: 7, title: "OMEN OF THE VOID", genre: "Horror", size: "198 blocks", desc: "First-person horror. Explore an abandoned WiiWare server.", icon: "👁️📼" , id: 8, title: "GHOSTWARE TENNIS", genre: "Sports", size: "304 blocks", desc: "Arcade tennis with phantom opponents. MotionPlus enhanced.", icon: "🎾👻" , id: 9, title: "PUPPET MASTER", genre: "Strategy", size: "167 blocks", desc: "Control marionettes to solve environmental puzzles.", icon: "🎭🧵" , id: 10, title: "WAVES OF NIGHT", genre: "Adventure", size: "278 blocks", desc: "Atmospheric narrative game about a lighthouse keeper & ghosts.", icon: "🌊🏮" , id: 11, title: "BIT PHANTOM", genre: "Platformer", size: "143 blocks", desc: "Glitchy retro platformer. Shift between dimensions.", icon: "🕹️📺" ]; Co-op ghost-slashing
<div class="game-grid" id="gameGrid"></div> <footer> ⚡ GHOSTWARE PRESERVATION PROJECT • EMULATED WIIWARE EXPERIENCE ⚡ </footer> </div>
h1 font-size: 2.8rem; letter-spacing: -1px; background: linear-gradient(135deg, #eef4ff, #7bb3ff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 6px rgba(70,130,200,0.5);
/* Wii-style widescreen container */ .collection-container max-width: 1200px; margin: 0 auto; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); border-radius: 48px; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); border: 1px solid rgba(90, 180, 255, 0.3); Relaxing wind physics
// Close modal via button or outside click document.getElementById('closeModalBtn').addEventListener('click', closeModal); window.addEventListener('click', (e) => if (e.target === modal) closeModal(); );
.sub margin-bottom: 2rem; font-style: italic; color: #8db4e0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between;