/* style.css - Criarte Engine */
body { background-color: #0d1117; color: #c9d1d9; font-family: 'Segoe UI', monospace; overflow: hidden; user-select: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #58a6ff; }
#app { display: grid; grid-template-columns: 60px 1fr; height: 100vh; }
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60px; cursor: pointer; border-left: 3px solid transparent; transition: 0.2s; color: #8b949e; }
.nav-item:hover { color: #fff; background: #161b22; }
.nav-item.active { border-left-color: #58a6ff; color: #58a6ff; background: #161b22; }
.nav-icon { font-size: 20px; margin-bottom: 4px; }
.nav-label { font-size: 8px; text-transform: uppercase; font-weight: bold; }
.workspace { display: none; height: 100%; overflow: hidden; position: relative; }
.workspace.active { display: flex; }
.pixel-grid { background-image: linear-gradient(45deg, #1f1f1f 25%, transparent 25%, transparent 75%, #1f1f1f 75%, #1f1f1f), linear-gradient(45deg, #1f1f1f 25%, transparent 25%, transparent 75%, #1f1f1f 75%, #1f1f1f); background-size: 20px 20px; background-position: 0 0, 10px 10px; box-shadow: 0 0 20px rgba(0,0,0,0.5); image-rendering: pixelated; }
.sprite-slot { aspect-ratio: 1; background-color: #050505; border: 1px solid #30363d; cursor: pointer; position: relative; image-rendering: pixelated; }
.sprite-slot:hover { border-color: #8b949e; }
.sprite-slot.active { border: 2px solid #58a6ff; z-index: 10; }
.sprite-slot.empty { opacity: 0.3; }
.sprite-slot .slot-num { position: absolute; top: 1px; left: 2px; font-size: 8px; color: #555; pointer-events: none;}
textarea#code-input { width: 100%; height: 100%; background: #0d1117; color: #a5d6ff; border: none; padding: 20px; font-family: 'Consolas', 'Monaco', monospace; font-size: 14px; line-height: 1.5; resize: none; outline: none; }
#game-canvas { image-rendering: pixelated; background: #000; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
#splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, #1f2937 0%, #000000 100%); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 1s; }
.loading-bar { width: 200px; height: 4px; background: #333; margin-top: 20px; border-radius: 2px; overflow: hidden; position: relative; }
.loading-bar .progress { position: absolute; width: 50%; height: 100%; background: #00ff00; animation: loadAnim 1.5s infinite ease-in-out; }
@keyframes loadAnim { 0% { left: -50%; } 100% { left: 100%; } }