/*
    Copyright (c) 2026 Sammer para PetriaMud.
    Todos los derechos reservados.
    Uso autorizado exclusivamente dentro del proyecto PetriaMud.
    Contacto: sammerpetria@gmail.com
*/

:root {
    color-scheme: dark;
    font-family: monospace;
    background: #000000;
    color: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body,
.terminal {
    height: 100%;
}

body {
    margin: 0;
}

/* Al reves de como estan en el documento: la salida arriba y el comando abajo,
   como siempre, pero tabulando desde el comando se llega a la salida. */
.terminal {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    min-height: 100%;
    padding: 0.75rem;
}

/* Sin pre-wrap aqui a proposito: con el, la sangria y los saltos que separan
   las etiquetas en el html se pintan como texto de verdad, y al recorrer la
   salida aparecian lineas en blanco que no manda el MUD. Va en .output-line,
   que es donde hace falta para respetar la alineacion del juego. */
.output-container {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

/* Es un campo editable, pero no se pinta como tal: sigue pareciendo una
   terminal. El recuadro al enfocarlo si hace falta, para quien mira. */
.output-container:focus-visible {
    outline: 3px solid #66b3ff;
    outline-offset: 2px;
}

.output-container[contenteditable] {
    caret-color: #66b3ff;
}

.game-output {
    overflow-wrap: anywhere;
}

.output-line {
    min-height: 1.4em;
    white-space: pre-wrap;
}

/* Las lineas en blanco del MUD no se crean, para que el lector no las recorra.
   Este margen hace su papel: separa igual sin meter nada en el texto. */
.output-line.tras-blanco {
    margin-top: 1.4em;
}

.ansi-bold {
    font-weight: 700;
}

.ansi-underline {
    text-decoration: underline;
}

.ansi-inverse {
    filter: invert(1);
}

.ansi-fg-black { color: #000000; }
.ansi-fg-red { color: #ff6b6b; }
.ansi-fg-green { color: #7ee787; }
.ansi-fg-yellow { color: #ffd866; }
.ansi-fg-blue { color: #78a9ff; }
.ansi-fg-magenta { color: #d69cff; }
.ansi-fg-cyan { color: #70d7ff; }
.ansi-fg-white { color: #ffffff; }
.ansi-fg-bright-black { color: #8b949e; }
.ansi-fg-bright-red { color: #ff8b8b; }
.ansi-fg-bright-green { color: #a8ff9c; }
.ansi-fg-bright-yellow { color: #fff08a; }
.ansi-fg-bright-blue { color: #a6c8ff; }
.ansi-fg-bright-magenta { color: #edb4ff; }
.ansi-fg-bright-cyan { color: #a5f3ff; }
.ansi-fg-bright-white { color: #ffffff; }

.ansi-bg-black { background-color: #000000; }
.ansi-bg-red { background-color: #7f1d1d; }
.ansi-bg-green { background-color: #14532d; }
.ansi-bg-yellow { background-color: #713f12; }
.ansi-bg-blue { background-color: #1e3a8a; }
.ansi-bg-magenta { background-color: #581c87; }
.ansi-bg-cyan { background-color: #164e63; }
.ansi-bg-white { background-color: #ffffff; color: #000000; }
.ansi-bg-bright-black { background-color: #374151; }
.ansi-bg-bright-red { background-color: #991b1b; }
.ansi-bg-bright-green { background-color: #166534; }
.ansi-bg-bright-yellow { background-color: #854d0e; }
.ansi-bg-bright-blue { background-color: #1e40af; }
.ansi-bg-bright-magenta { background-color: #7e22ce; }
.ansi-bg-bright-cyan { background-color: #0e7490; }
.ansi-bg-bright-white { background-color: #ffffff; color: #000000; }

.command-form {
    flex: 0 0 auto;
    margin-top: 0.75rem;
}

.command-divider {
    border-top: 1px solid #6b7280;
    height: 1px;
    margin-bottom: 0.5rem;
}

#command-input {
    background: #000000;
    border: 0;
    border-bottom: 2px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    display: block;
    font: inherit;
    outline: 0;
    padding: 0.5rem 0;
    width: 100%;
}

#command-input:focus-visible {
    border-bottom-color: #66b3ff;
    outline: 3px solid #66b3ff;
    outline-offset: 3px;
}

.sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}