:root { --win-bg: #c0c0c0; --win-text: #000000; --win-gray-light: #dfdfdf; --win-gray-dark: #808080; --win-blue: #000080; --win-white: #ffffff; } body { background-color: var(--win-bg); /* Match window background */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; overflow: hidden; } /* Windows 3.1 / 95 Style Window */ .window { background-color: var(--win-bg); border: none; /* Remove outer borders for full screen */ box-shadow: none; padding: 0; display: flex; flex-direction: column; width: 100vw; height: 100vh; } .title-bar { background: var(--win-blue); padding: 3px 2px; display: flex; justify-content: space-between; align-items: center; color: var(--win-white); font-weight: bold; font-family: sans-serif; letter-spacing: 0.5px; } .title-bar-text { margin-left: 4px; } .window-body { flex: 1; padding: 10px; display: flex; flex-direction: column; gap: 10px; } /* Inset Border (Sunken look) */ .inset-border { border: 2px solid var(--win-gray-dark); border-right-color: var(--win-white); border-bottom-color: var(--win-white); background: var(--win-white); /* Canvas background */ } #main-layout { display: flex; gap: 10px; flex: 1; min-height: 0; /* Fix flex overflow */ } #viewport-container { flex: 1; background: #000; /* Game background */ overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; border: none; /* Remove border for cleaner look */ } #game-canvas { image-rendering: pixelated; width: 100%; height: 100%; } #sidebar { width: 200px; display: flex; flex-direction: column; gap: 10px; } /* Group Box */ .group-box { border: 2px solid var(--win-gray-light); border-top-color: var(--win-white); border-left-color: var(--win-white); border-right-color: var(--win-gray-dark); border-bottom-color: var(--win-gray-dark); padding: 10px; position: relative; margin-top: 10px; } .group-box-label { position: absolute; top: -10px; left: 10px; background: var(--win-bg); padding: 0 5px; } #message-log { height: 120px; padding: 10px; overflow-y: auto; font-family: 'Courier New', Courier, monospace; font-size: 15px; background: #000; color: #00ff00; /* Matrix/Classic terminal style */ border: 2px solid var(--win-gray-dark); } .status-bar { border-top: 1px solid var(--win-gray-dark); padding: 2px 5px; font-size: 12px; }