html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: darkturquoise; }
body { display: flex; justify-content: center; align-items: center; }
.map-image { width: 1800px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.tile-layout { display: grid; grid-template-columns: 1000px 1fr; width: 100%; height: 100%; background: #000; color: #27ae60; font-family: monospace; }
.tile-map-column { display: flex; justify-content: center; align-items: center; background: #000; }
.tile-info-column { padding: 40px; overflow-y: auto; }
.tile-image { width: 1000px; height: 1000px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.map-wrapper { position: relative; width: 1800px; height: 900px; }
#tile-highlight { position: absolute; width: 100px; height: 100px; border: 2px solid #0f0; box-sizing: border-box; pointer-events: none; display: none; box-shadow: 0 0 10px #0f0, inset 0 0 10px #0f0; background: rgba(0, 255, 0, 0.08); }