:root {
    --bg-main: #0d1117;
    --bg-panel: #161b22;
    --bg-editor: #1e1e1e;
    --accent: #3794ff;
    --success: #4ec9b0;
    --border: #3c3c3c;
    --text: #d4d4d4;
    --code-color: #9cdcfe;
    --code-keyword: #c586c0; /* Púrpura */
    --code-value: #ce9178; /* Naranja */
}

* { box-sizing: border-box; }
body { background: var(--bg-main); color: var(--text); font-family: 'Segoe UI', sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

header { background: var(--bg-panel); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--accent); }
.logo-area { display: flex; gap: 15px; align-items: center; }
h1 { font-size: 1.2rem; letter-spacing: 1px; color: var(--accent); margin: 0; }
#level-indicator { font-size: 1rem; color: #888; font-family: 'Fira Code', monospace; }

/* Paneles */
.game-container { display: flex; flex: 1; gap: 15px; padding: 15px; overflow: hidden; }
.panel { flex: 1; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 15px; display: flex; flex-direction: column; }

h2, p { margin: 0 0 10px 0; }
#level-title { color: var(--accent); font-size: 1.4rem; }
#target-info { background: #2d2d2d; padding: 8px; border-left: 4px solid var(--success); font-family: 'Fira Code', monospace; font-size: 0.85rem; margin: 10px 0; color: #b5cea8; /* Verde claro */ }
#hint { font-style: italic; color: #aaa; font-size: 0.9rem; }

/* Editor */
.editor-wrapper { position: relative; flex: 1; margin-top: 10px; }
#editor, #textarea-mirror {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    line-height: 20px;
    padding: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#editor {
    width: 100%; height: 100%; background: var(--bg-editor); color: var(--code-color);
    border: 1px solid var(--border); resize: none; outline: none; position: relative; z-index: 2;
}
#textarea-mirror { position: absolute; top: 0; left: 0; visibility: hidden; z-index: 1; pointer-events: none; width: 100%; }

/* Sugerencias (VS Code Style) */
#suggestions {
    position: absolute; background: #252526; border: 1px solid #454545;
    min-width: 180px; max-height: 200px; overflow-y: auto; z-index: 1000; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    border-radius: 4px;
}
.suggestion-item { padding: 6px 12px; cursor: pointer; display: flex; justify-content: space-between; font-size: 12px; color: #cccccc; }
.suggestion-item.active { background: #094771; color: white; }
.suggestion-item small { color: #808080; }
.suggestions-hidden { display: none; }

/* Render Area (Visualizadores) */
.render-area {
    flex: 1; background: #0a0a0a; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; position: relative;
    background-image: radial-gradient(#222 1px, transparent 1px); background-size: 20px 20px;
    border-radius: 4px;
}
.preview-box { flex: 1; display: flex; flex-direction: column; margin-bottom: 10px; }
label { font-size: 10px; color: #888; margin-bottom: 4px; font-family: 'Fira Code', monospace; }

/* FIX CRÍTICO: Elementos siempre visibles y con base */
#target-element, #user-element { 
    display: block !important; 
    min-width: 80px; 
    min-height: 80px; 
    transition: all 0.1s ease-out; /* Suaviza los cambios visuales */
}
#feedback { font-size: 1.8rem; text-align: center; font-family: 'Fira Code', monospace; padding: 10px; color: var(--accent); }

/* Botones */
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
button { padding: 10px 15px; cursor: pointer; border: none; border-radius: 4px; font-weight: bold; background: #333; color: white; transition: background-color 0.2s, filter 0.2s; }
button.primary { background: var(--accent); }
button:hover { filter: brightness(1.2); }
button:active { filter: brightness(0.8); }

/* Menú de Niveles */
#level-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.menu-hidden { display: none !important; }
.menu-content { background: #252526; padding: 25px; border-radius: 8px; width: 90%; max-width: 550px; border: 1px solid var(--border); }
.menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.menu-header h2 { color: var(--accent); margin: 0; }
#close-menu { background: none; border: none; font-size: 2rem; color: #888; cursor: pointer; padding: 0 10px; }
#level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; margin-top: 15px; max-height: 400px; overflow-y: auto; padding: 5px; }
.level-item { height: 50px; background: #333; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px; font-weight: bold; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.level-item:hover { background: #444; }
.level-item.active { border: 2px solid var(--accent); color: var(--accent); background: #2a3a4a; }