/* === Estilos Globales (Comunes a ambas páginas) === */
body {
    font-family: 'Inter', sans-serif;
}

/* 
 * Estilos para elementos de código, consistentes en todo el sitio.
 * Se unifican las reglas de index.html y admin.html.
*/
pre, code, textarea, #code-display {
    font-family: 'Fira Code', monospace;
    font-variant-ligatures: common-ligatures;
    tab-size: 4;
    -moz-tab-size: 4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* === Estilos Específicos de la Página del Juego (index.html) === */

/* Contenedor para el área de entrada de código */
.code-input-wrapper {
    position: relative;
    background-color: #111827; /* bg-gray-900 */
    border-radius: 0.5rem; /* rounded-lg */
}

/* Área donde se muestra el código coloreado que el usuario escribe */
#code-display {
    min-height: 12rem;
    padding: 1rem;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.25rem;
}

/* Media query para hacer el texto más grande en pantallas medianas y superiores */
@media (min-width: 768px) {
    #code-display {
        font-size: 1rem; /* text-base */
        line-height: 1.5rem;
    }
}

/* Textarea invisible que captura la entrada del usuario */
#user-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    resize: none;
    border: none;
    background: transparent;
    color: transparent;
    caret-color: transparent; /* Oculta el cursor de texto real */
}

/* Cursor parpadeante personalizado */
.blinking-cursor {
    font-weight: bold;
    color: #34D399; /* emerald-400 */
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: #34D399; }
}