:root { --bg-dark: #1e1e1e; --bg-light: #2e2e2e; --maze-bg: #242424; --wall-color: #111; --floor-color: #3a3a3a; --end-color: #f1c40f; --player-color: #2ecc71; --text-color: #ecf0f1; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; background: linear-gradient(135deg, var(--bg-dark), var(--bg-light)); color: var(--text-color); font-family: 'Press Start 2P', monospace; user-select: none; display: flex; align-items: center; justify-content: center; } #game-container { background: rgba(0,0,0,0.7); padding: 24px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.8); max-height: 100%; overflow: auto; } #info { background: rgba(0,0,0,0.5); padding: 8px 12px; border-radius: 6px; font-size: 0.9rem; text-align: center; margin-bottom: 12px; } #maze { display: grid; grid-template: repeat(10, 40px) / repeat(10, 40px); gap: 4px; background: var(--maze-bg); padding: 4px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.6); } .cell { width: 40px; height: 40px; background: var(--floor-color); border-radius: 4px; transition: background 0.2s ease, box-shadow 0.2s ease; } .wall { background: var(--wall-color); } .end { background: var(--end-color); box-shadow: 0 0 8px var(--end-color); } .player { background: var(--player-color); box-shadow: 0 0 12px var(--player-color); } #message { margin-top: 12px; background: rgba(0,0,0,0.5); padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; text-align: center; min-height: 2em; } #flag { margin-top: 8px; font-size: 1rem; color: var(--end-color); text-shadow: 0 0 5px var(--end-color); min-height: 1.2em;