/* ============================================================
   BRIDGE OS — Installation 22
   Estilos: Boot OS (fases 0-5) + Escritorio actualizado (fase 6)
            + Biblioteca AEGIS/VOID + Motor lyssa7 (acertijos)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
    /* Terminal verde (Boot OS / acertijos) */
    --green:   #00ff41;
    --amber:   #ffb000;
    --red:     #ff4d4d;
    --bg:      #060808;
    --fg:      #c8d8c0;
    --font:    'Share Tech Mono', monospace;
    --vt:      'VT323', monospace;

    /* Escritorio Bridge (azul pre-update) */
    --desk-bg: #003680;

    /* Escritorio actualizado (XP-abstracto) */
    --nd-bg:   #1a3a6e;

    /* Biblioteca — paleta fría / archivo remoto */
    --lib-bg:   #040810;
    --lib-brd:  #1a2a3a;
    --lib-text: #8a9aaa;
    --lib-dim:  #4a5a6a;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden;
    font-family: var(--font); background: var(--bg); color: var(--green); }

.hidden { display: none !important; }

#yt-player-wrap {
    position: fixed; top: -9999px; left: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

/* ─── ANIMACIONES ─── */
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes shake    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
    40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes ndIconPop { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }

.blink { animation: blink 1s step-start infinite; }
.shake { animation: shake 0.5s ease; }

/* ─── GLITCH ─── */
@keyframes glitch-body {
    0%   { transform:skewX(0); filter:none; }
    15%  { transform:skewX(-3deg) translateX(4px); filter:hue-rotate(90deg) brightness(1.3); }
    30%  { transform:skewX(2deg) translateX(-4px); filter:hue-rotate(200deg) brightness(0.8); }
    60%  { transform:skewX(3deg) translateX(-2px); filter:hue-rotate(60deg); }
    100% { transform:skewX(0); filter:none; }
}
body.glitch-on    { animation: glitch-body 0.12s steps(2) infinite; }
body.glitch-micro { animation: glitch-body 0.08s steps(1) 2; }

/* ════════════════════════════════
   FASE 0 — BOOT
   ════════════════════════════════ */
#boot-screen {
    position:fixed; inset:0; background:#000; color:var(--green);
    font-size:0.8em; padding:20px 30px; overflow:hidden;
    display:flex; flex-direction:column; gap:0;
}
#boot-log { flex:1; overflow:hidden; line-height:1.6; }
#boot-cursor { color:var(--green); }
#boot-log .bl { line-height:1.5; white-space:pre; }
.boot-ok { color:var(--green); font-weight:bold; }

/* ════════════════════════════════
   FASE 0.5 — LOGIN
   ════════════════════════════════ */
#os-login {
    position:fixed; inset:0; background:#000;
    display:flex; align-items:center; justify-content:center;
    animation:fadeIn 0.4s ease;
}
#os-login-box {
    width:min(420px,90vw); padding:32px;
    border:1px solid var(--green);
    background:rgba(0,30,10,0.95);
    box-shadow:0 0 30px rgba(0,255,65,0.2), inset 0 0 20px rgba(0,255,65,0.03);
    text-align:center;
}
.os-logo-glyph { font-size:3em; color:var(--green); text-shadow:0 0 12px var(--green); margin-bottom:8px; }
.os-brand { font-family:var(--vt); font-size:2.2em; letter-spacing:4px; color:var(--green); text-shadow:0 0 6px var(--green); }
.os-version { font-size:0.7em; opacity:0.6; }
.os-sub { font-size:0.75em; color:var(--fg); opacity:0.6; margin-bottom:24px; }
.os-login-fields { text-align:left; border:1px solid rgba(0,255,65,0.3); padding:16px; margin-bottom:12px; }
.os-field-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.os-field-label { font-size:0.75em; color:var(--fg); opacity:0.6; width:100px; flex-shrink:0; }
.os-field-val { color:var(--green); }
#os-password-input {
    flex:1; background:transparent; border:none; border-bottom:1px solid var(--green);
    outline:none; color:var(--green); font:inherit; font-size:1em;
    letter-spacing:3px; padding:2px 4px;
}
#os-login-error { color:var(--red); font-size:0.8em; margin-top:8px; text-align:center; }
.os-hint { font-size:0.65em; color:var(--fg); opacity:0.4; text-align:center; margin-top:4px; }

/* ════════════════════════════════
   FASE 1 — ESCRITORIO v1.6.9
   ════════════════════════════════ */
#bridge-desktop {
    position:fixed; inset:0; background:var(--desk-bg);
    display:flex; flex-direction:column; overflow:hidden; animation:fadeIn 0.4s ease;
}
#bridge-desktop::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0.05) 0px,rgba(0,0,0,0.05) 1px,transparent 1px,transparent 3px);
}
#desktop-taskbar {
    position:relative; display:flex; align-items:center; gap:16px;
    padding:6px 14px; background:rgba(0,0,0,0.6); font-size:0.75em; color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.15); z-index:10;
}
.taskbar-brand { color:#adf; font-weight:bold; }
.taskbar-info { color:rgba(255,255,255,0.5); font-size:0.9em; }
.taskbar-clock { margin-left:auto; color:#fff; }

/* Iconos decorativos */
.desktop-sidebar { position:absolute; top:50px; bottom:80px; display:flex; flex-direction:column; align-items:center; gap:16px; padding:16px 8px; }
.desktop-sidebar--left  { left:16px; }
.desktop-sidebar--right { right:16px; }
.desktop-dock { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; gap:8px; padding:8px; background:rgba(0,0,0,0.5); border-top:1px solid rgba(255,255,255,0.1); }
.desktop-icon { display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; width:68px; font-size:0.65em; color:#ddf; text-align:center; cursor:default; border:1px solid transparent; border-radius:3px; transition:background 0.2s,border-color 0.2s; user-select:none; }
.desktop-icon:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.35); }
.desktop-icon--btn { cursor:pointer; }
.desktop-icon--btn .icon-sym { color:#88eebb; text-shadow:0 0 10px rgba(100,220,150,0.5); }
.icon-sym { font-size:2em; text-shadow:0 0 10px rgba(150,200,255,0.6); color:#aaddff; }
.desktop-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.desktop-logo { font-size:5em; color:rgba(255,255,255,0.07); text-shadow:0 0 40px rgba(150,200,255,0.1); }
.desktop-logo-sub { font-size:0.8em; color:rgba(255,255,255,0.05); letter-spacing:8px; }

/* Popup de actualización */
#update-popup { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(380px,92vw); background:#1a1a2e; border:1px solid #4466aa; box-shadow:0 8px 30px rgba(0,0,0,0.6); z-index:20; animation:fadeIn 0.3s ease; }
.upd-titlebar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#2244aa; color:#fff; font-size:0.85em; }
.upd-close { cursor:pointer; opacity:0.6; }
.upd-body { padding:16px; font-size:0.8em; color:#ccd; line-height:1.6; }
.upd-code { color:var(--amber); }
.upd-warn { color:var(--red); }
.upd-actions { padding:12px 16px; display:flex; gap:12px; justify-content:flex-end; border-top:1px solid rgba(255,255,255,0.1); }
.upd-actions button { font:inherit; font-size:0.8em; padding:6px 16px; cursor:pointer; border:1px solid currentColor; background:transparent; transition:background 0.15s; }
#btn-upd-accept { color:var(--green); border-color:var(--green); }
#btn-upd-accept:hover { background:rgba(0,255,65,0.15); }
#btn-upd-later { color:var(--fg); border-color:rgba(255,255,255,0.2); }
#btn-upd-later:hover { background:rgba(255,255,255,0.05); }

/* ════════════════════════════════
   FASE 2 — DIÁLOGO AEGIS/VOID
   ════════════════════════════════ */
#dialogue-screen {
    position:fixed; inset:0; background:#000;
    display:flex; align-items:center; justify-content:center; animation:fadeIn 0.4s ease;
}
#dialogue-content { width:min(700px,90vw); padding:20px; }
#dialogue-text { line-height:1.9; min-height:100px; }
.dlg-cursor { color:var(--green); font-size:1.4em; }
.dlg-sys { color:var(--fg); opacity:0.8; }
.dlg-ae  { color:#44aaff; }
.dlg-vo  { color:var(--green); }
#conn-bar-wrap { margin-top:32px; text-align:center; animation:fadeIn 0.4s ease; }
.conn-sym { color:var(--green); font-size:1.2em; letter-spacing:8px; margin-bottom:12px; opacity:0.7; }
#conn-bar-outer { height:6px; background:rgba(0,255,65,0.12); border:1px solid rgba(0,255,65,0.3); border-radius:2px; overflow:hidden; margin-bottom:8px; }
#conn-bar-inner { height:100%; background:var(--green); width:0%; transition:width 0.1s linear; box-shadow:0 0 8px var(--green); }
#conn-bar-label { font-size:0.75em; color:var(--fg); opacity:0.6; }

/* ════════════════════════════════
   FASE 3-4 — BRIDGE TERMINAL
   ════════════════════════════════ */
#bridge-terminal {
    position:fixed; inset:0; background:#000;
    display:flex; flex-direction:column; overflow:hidden; animation:fadeIn 0.4s ease;
}
#bterm-header { padding:10px 16px 8px; border-bottom:1px solid rgba(0,255,65,0.25); background:rgba(0,20,8,0.8); }
.bterm-hline { font-size:0.78em; line-height:1.5; color:var(--fg); opacity:0.7; }
.bterm-hint { opacity:0.45; }
.bterm-hint strong { color:var(--green); opacity:1; }
#bterm-output { flex:1; overflow-y:auto; padding:12px 16px; scrollbar-width:thin; scrollbar-color:rgba(0,255,65,0.3) transparent; }
#bterm-output::-webkit-scrollbar { width:4px; }
#bterm-output::-webkit-scrollbar-thumb { background:rgba(0,255,65,0.3); border-radius:2px; }
#bterm-output .bl { line-height:1.55; font-size:0.85em; white-space:pre-wrap; word-break:break-all; }
.bt-cmd  { color:var(--fg); opacity:0.5; }
.bt-hdr  { color:var(--fg); opacity:0.55; font-size:0.78em; }
.bt-sys  { color:var(--fg); }
.bt-ok   { color:var(--green); }
.bt-warn { color:var(--amber); }
.bt-err  { color:var(--red); }
.bt-bar  { color:var(--green); font-family:var(--font); letter-spacing:1px; }
.bt-reddit { color:#88bbff; }
.bt-reddit-link { color:#88bbff; }
.bt-reddit-link a { color:#aad4ff; text-decoration:underline; }
#bterm-input-row { display:flex; align-items:center; gap:8px; padding:10px 16px; border-top:1px solid rgba(0,255,65,0.2); background:rgba(0,20,8,0.7); }
.bterm-prompt { color:var(--green); opacity:0.7; font-size:0.85em; white-space:nowrap; }
#bterm-input { flex:1; background:transparent; border:none; outline:none; color:var(--green); font:inherit; font-size:0.9em; caret-color:var(--green); }

/* ════════════════════════════════
   FASE 5 — REINICIO
   ════════════════════════════════ */
#reboot-screen { position:fixed; inset:0; background:#000; display:flex; align-items:center; justify-content:center; gap:16px; }
#reboot-dots { display:flex; gap:16px; }
.rdot { font-size:2.5em; color:var(--green); animation:blink 1.2s step-start infinite; }
.rdot:nth-child(2) { animation-delay:0.4s; }
.rdot:nth-child(3) { animation-delay:0.8s; }

/* ════════════════════════════════
   FASE 6 — ESCRITORIO ACTUALIZADO (XP-abstracto)
   ════════════════════════════════ */
#new-desktop {
    position:fixed; inset:0;
    background: linear-gradient(160deg, #0d2a5a 0%, #1a3a6e 40%, #0d234f 100%);
    display:flex; flex-direction:column; overflow:hidden; animation:fadeIn 0.5s ease;
}
/* Textura sutil */
#new-desktop::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background-image:radial-gradient(circle at 30% 50%, rgba(100,160,255,0.06) 0%, transparent 60%),
        repeating-linear-gradient(0deg,rgba(0,0,0,0.04) 0px,rgba(0,0,0,0.04) 1px,transparent 1px,transparent 4px);
}

/* ─ Taskbar XP ─ */
#nd-taskbar {
    position:relative; display:flex; align-items:center; z-index:10;
    background:linear-gradient(180deg, #1e4fa0 0%, #0e2d6a 100%);
    border-top:2px solid #3a6fc4;
    padding:0 8px; height:40px; order:2; /* va abajo */
}
#nd-start-btn {
    display:flex; align-items:center; gap:6px;
    background:linear-gradient(180deg,#3e8f3e,#2a6a2a);
    border:1px solid #4aaa4a; border-radius:12px;
    padding:4px 14px; color:#fff; font:inherit; font-size:0.8em; font-weight:bold;
    cursor:pointer; letter-spacing:1px;
    box-shadow:0 2px 6px rgba(0,0,0,0.4);
    transition:filter 0.15s;
}
#nd-start-btn:hover { filter:brightness(1.2); }
.nd-start-logo { font-size:1.2em; text-shadow:0 0 8px rgba(255,255,255,0.5); }
#nd-tray { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:0.72em; color:rgba(255,255,255,0.8); }
#nd-tray-user { color:#aaddff; letter-spacing:1px; }

/* ─ Workspace (área del escritorio) ─ */
#nd-workspace {
    position:relative; flex:1; overflow:hidden; order:1;
}

/* Sidebars decorativas */
.nd-sidebar { position:absolute; top:20px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:12px 8px; }
.nd-sidebar--left  { left:16px; }
.nd-sidebar--right { right:16px; }

/* Icono genérico (decorativo) */
.nd-icon {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:8px 6px; width:66px; font-size:0.62em; color:rgba(255,255,255,0.7);
    text-align:center; cursor:default; border:1px solid transparent; border-radius:4px;
    user-select:none; transition:background 0.15s, border-color 0.15s;
    animation:ndIconPop 0.3s ease both;
}
.nd-icon:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.3); }
.nd-icon-sym { font-size:1.9em; color:#99ccff; text-shadow:0 0 10px rgba(100,180,255,0.5); }

/* Centro del escritorio */
.nd-center {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);
    text-align:center; pointer-events:none;
}
.nd-logo { font-size:5em; color:rgba(255,255,255,0.06); text-shadow:0 0 60px rgba(100,160,255,0.12); }
.nd-logo-ver { font-size:0.7em; color:rgba(255,255,255,0.12); letter-spacing:4px; margin-top:4px; }
.nd-logo-sub { font-size:0.6em; color:rgba(100,200,100,0.2); letter-spacing:6px; margin-top:2px; }

/* ─ Dock (iconos funcionales) ─ */
#nd-dock {
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; gap:12px; align-items:flex-end;
    background:rgba(0,0,0,0.35); border:1px solid rgba(255,255,255,0.12);
    border-radius:10px; padding:10px 16px;
    backdrop-filter:blur(6px);
}

/* Icono funcional (botón) */
.nd-dock-icon {
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:10px 12px; width:76px; font-size:0.68em;
    text-align:center; border-radius:6px; cursor:pointer; user-select:none;
    font-family:var(--font); border:1px solid transparent;
    background:transparent; color:#ddeeff;
    transition:background 0.2s, border-color 0.2s, transform 0.15s;
    animation:ndIconPop 0.4s ease both;
}
.nd-dock-icon:nth-child(1) { animation-delay:0.05s; }
.nd-dock-icon:nth-child(2) { animation-delay:0.1s; }
.nd-dock-icon:nth-child(3) { animation-delay:0.15s; }
.nd-dock-icon:nth-child(4) { animation-delay:0.2s; }

button.nd-dock-icon { cursor:pointer; }
button.nd-dock-icon:hover {
    background:rgba(100,160,255,0.18);
    border-color:rgba(100,180,255,0.45);
    transform:translateY(-3px);
    color:#fff;
}
/* Funcionales resaltados */
#nd-btn-biblioteca .nd-dock-sym { color:#8a9aaa; text-shadow:none; }
#nd-btn-protocolo  .nd-dock-sym { color:#88ccff; text-shadow:0 0 10px rgba(100,180,255,0.5); }
#nd-btn-biblioteca:hover { border-color:rgba(138,154,170,0.4) !important; }
#nd-btn-protocolo:hover  { border-color:rgba(100,200,255,0.5) !important; }

.nd-dock-sym { font-size:2em; }

/* Dim para iconos decorativos del dock */
.nd-dock-icon--dim { opacity:0.4; cursor:default; }
.nd-dock-icon--dim:hover { background:transparent; border-color:transparent; transform:none; }

/* ════════════════════════════════
   VENTANA DE BIBLIOTECA — AEGIS/VOID
   ════════════════════════════════ */
#lib-window {
    position:fixed;
    top:5%; left:50%;
    transform:translateX(-50%);
    width:min(820px, 94vw);
    height:80vh;
    background:var(--lib-bg);
    border:1px solid var(--lib-brd);
    box-shadow:0 0 40px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.4);
    display:flex; flex-direction:column;
    z-index:100;
    animation:fadeIn 0.3s ease;
    font-family:var(--font);
}

#lib-titlebar {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 12px;
    height:32px;
    background:#0a1018;
    border-bottom:1px solid var(--lib-brd);
    flex-shrink:0;
}
.lib-tb-left { display:flex; align-items:center; gap:8px; }
.lib-tb-icon { color:var(--lib-dim); font-size:0.9em; }
.lib-tb-title { color:var(--lib-text); font-size:0.72em; letter-spacing:2px; font-weight:normal; }

#lib-close-btn {
    background:rgba(255,50,50,0.15); border:1px solid rgba(255,80,80,0.4);
    color:#ff6666; font:inherit; font-size:0.8em;
    width:24px; height:24px; cursor:pointer; border-radius:2px;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s;
}
#lib-close-btn:hover { background:rgba(255,50,50,0.35); }

/* Cuerpo principal */
#lib-body {
    display:flex; flex:1; overflow:hidden;
}

/* ─ Navegación lateral ─ */
#lib-nav {
    width:190px; flex-shrink:0;
    background:#060a10;
    border-right:1px solid var(--lib-brd);
    display:flex; flex-direction:column;
    padding:12px 0;
    overflow-y:auto;
}
.lib-nav-title {
    padding:8px 16px 12px;
    font-size:0.6em; letter-spacing:3px;
    color:var(--lib-dim);
    border-bottom:1px solid var(--lib-brd);
    margin-bottom:8px;
}
.lib-nav-btn {
    display:block; width:100%;
    padding:8px 16px; text-align:left;
    background:transparent; border:none;
    color:var(--lib-dim); font:inherit; font-size:0.72em;
    cursor:pointer; border-left:2px solid transparent;
    transition:background 0.15s, border-color 0.15s, color 0.15s;
    line-height:1.3;
}
.lib-nav-btn:hover {
    background:rgba(255,255,255,0.03);
    color:var(--lib-text);
}
.lib-nav-btn.active {
    background:rgba(255,255,255,0.05);
    border-left-color:var(--lib-text);
    color:var(--lib-text);
}

/* ─ Área de contenido ─ */
#lib-content {
    flex:1; overflow-y:auto; padding:24px 28px;
    scrollbar-width:thin;
    scrollbar-color:rgba(68,153,238,0.3) transparent;
}
#lib-content::-webkit-scrollbar { width:5px; }
#lib-content::-webkit-scrollbar-thumb { background:rgba(68,153,238,0.3); border-radius:3px; }

.lib-section-title {
    font-family:var(--font);
    font-size:0.85em; letter-spacing:3px;
    color:var(--lib-text);
    margin-bottom:6px;
    font-weight:normal;
}
.lib-divider {
    height:1px; background:var(--lib-brd);
    margin-bottom:14px;
}
.lib-line {
    font-size:0.78em; color:var(--lib-text);
    line-height:1.65; margin-bottom:1px;
}
.lib-line--meta {
    font-size:0.68em; color:var(--lib-dim);
    letter-spacing:0.5px;
    margin-bottom:2px;
}
.lib-line--field {
    color:#6a7a8a; font-size:0.74em;
    font-family:var(--font);
}
.lib-line--classified {
    color:var(--amber); font-size:0.74em;
    border-left:2px solid rgba(255,176,0,0.4);
    padding-left:8px; margin:6px 0;
}

/* ════════════════════════════════
   MOTOR LYSSA7 — welcome-screen
   ════════════════════════════════ */
#welcome-screen {
    display:flex; justify-content:center; align-items:center;
    height:100vh; background:#000; animation:fadeIn 0.5s ease;
}
.welcome-box {
    width:min(520px,88vw); padding:32px;
    border:1px solid var(--green); background:rgba(0,0,0,0.95);
    box-shadow:0 0 20px rgba(0,255,65,0.15); text-align:center;
}
.welcome-logo { font-size:2.5em; color:var(--green); text-shadow:0 0 12px var(--green); margin-bottom:8px; }
.welcome-title { font-family:var(--vt); font-size:2em; letter-spacing:4px; color:var(--green); text-shadow:0 0 6px var(--green); margin-bottom:4px; }
.welcome-title span { font-size:0.65em; opacity:0.5; }
.welcome-sub { font-size:0.7em; color:var(--fg); opacity:0.5; margin-bottom:24px; letter-spacing:2px; }
#password-input-area { display:flex; align-items:center; gap:10px; border:1px solid rgba(0,255,65,0.4); padding:10px 14px; margin-top:16px; }
.prompt { color:var(--green); opacity:0.6; font-size:0.85em; white-space:nowrap; }
#password-input { flex:1; background:transparent; border:none; outline:none; color:var(--green); font:inherit; font-size:1em; caret-color:var(--green); }
#error-message { color:var(--red); font-size:0.8em; margin-top:12px; }

/* ════════════════════════════════
   MOTOR LYSSA7 — Acertijos
   ════════════════════════════════ */
/* ════════════════════════════════
   PROTOCOLO INST-22 — Terminal de enlace
   ════════════════════════════════ */
#protocol-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 16px;
    background:#0a1420;
    border-bottom:1px solid #1a3050;
    flex-shrink:0;
}
.ph-left { display:flex; align-items:center; gap:10px; }
.ph-logo { color:#4499ee; font-size:1.1em; opacity:0.8; }
.ph-brand { font-size:0.75em; letter-spacing:2px; color:#6a9ac8; }
.ph-status {
    font-size:0.65em; letter-spacing:2px;
    color:#55ffaa; opacity:0.7;
    animation:blink 2s step-start infinite;
}

body.protocol-mode #game-terminal {
    background:#060c14;
}
body.protocol-mode #terminal-output {
    color:#8a9aaa;
    scrollbar-color:rgba(68,153,238,0.2) transparent;
}
body.protocol-mode #terminal-output::-webkit-scrollbar-thumb {
    background:rgba(68,153,238,0.2);
}

/* Líneas con emisor en protocolo */
#terminal-output .line-aegis  { color:#4499ee; margin:4px 0; }
#terminal-output .line-void   { color:#55cc88; margin:4px 0; }
#terminal-output .line-inst   { color:#6a8aaa; opacity:0.85; margin:2px 0; font-size:0.85em; }
#terminal-output .line-bridge { color:#5a7a9a; opacity:0.8; margin:2px 0; font-size:0.85em; }
#terminal-output .line-hiver   { color:#7a9ab0; opacity:0.8; margin:2px 0; font-size:0.85em; }
#terminal-output .line-divider { color:#3a5060; opacity:0.6; margin:6px 0; font-size:0.8em; }
#terminal-output .line-directive { color:#8899aa; font-style:italic; margin:4px 0; }
#terminal-output .line-default  { color:#8a9aaa; margin:2px 0; }

body.protocol-mode #terminal-input-area {
    border-top-color:rgba(68,153,238,0.2);
    background:rgba(6,12,20,0.9);
}
body.protocol-mode #terminal-input-area .prompt { color:#4499ee; opacity:0.6; }
body.protocol-mode #terminal-input { color:#aad4ff; caret-color:#4499ee; }

body.protocol-mode #terminal-actions button,
body.protocol-mode #play-pause-button {
    color:#4499ee; border-color:rgba(68,153,238,0.4);
}
body.protocol-mode #terminal-actions button:hover,
body.protocol-mode #play-pause-button:hover {
    background:rgba(68,153,238,0.1);
}

body.protocol-mode #image-puzzle-container,
body.protocol-mode #image-clue-container {
    border-top-color:rgba(68,153,238,0.15);
    background:rgba(6,10,18,0.9);
}
body.protocol-mode #image-puzzle-buttons button {
    color:#4499ee; border-color:rgba(68,153,238,0.35);
}
body.protocol-mode #image-display-img,
body.protocol-mode #image-clue-img {
    border-color:rgba(68,153,238,0.25);
}

body.protocol-mode #skip-button {
    color:#8899aa; border-color:rgba(136,153,170,0.4);
}

body.protocol-mode .response-text { color:#6a8aaa; }
body.protocol-mode .hint-text { color:#889944; }
body.protocol-mode .prompt-text { color:#aad4ff; }
body.protocol-mode .room-description { color:#7a9ab0; }

body.protocol-mode .hiver-map {
    color:#6a8aaa; border:1px solid rgba(68,153,238,0.2);
    padding:10px 12px; margin:8px 0; font-size:0.78em;
    background:rgba(6,12,20,0.6);
}
body.protocol-mode .hiver-map__title { color:#5a7a9a; }
body.protocol-mode .hiver-cell--current { color:#55ffaa; }
body.protocol-mode .hiver-cell--visited { color:#4499ee; }
body.protocol-mode .hiver-cell--unknown { color:#3a5060; }

#game-terminal {
    display:flex; flex-direction:column; height:100vh;
    background:#000; overflow:hidden;
}
#terminal-output {
    flex:1; overflow-y:auto; padding:16px; line-height:1.7;
    font-size:0.88em; color:var(--fg);
    scrollbar-width:thin; scrollbar-color:rgba(0,255,65,0.3) transparent;
}
#terminal-output::-webkit-scrollbar { width:4px; }
#terminal-output::-webkit-scrollbar-thumb { background:rgba(0,255,65,0.3); border-radius:2px; }
#terminal-actions { padding:0 16px 8px; display:flex; flex-wrap:wrap; gap:8px; }
#terminal-actions button, #play-pause-button {
    font:inherit; font-size:0.8em; color:var(--green); background:transparent;
    border:1px solid var(--green); padding:6px 14px; cursor:pointer; transition:background 0.15s;
}
#terminal-actions button:hover, #play-pause-button:hover { background:rgba(0,255,65,0.12); }
#terminal-input-area { display:flex; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid rgba(0,255,65,0.2); background:rgba(0,20,8,0.7); }
#terminal-input { flex:1; background:transparent; border:none; outline:none; color:var(--green); font:inherit; font-size:0.95em; caret-color:var(--green); }

/* Puzzle imágenes */
#image-puzzle-container { padding:12px 16px; border-top:1px solid rgba(0,255,65,0.15); background:rgba(0,10,4,0.8); }
#image-puzzle-controls { display:flex; flex-direction:column; gap:12px; align-items:center; }
#image-puzzle-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
#image-puzzle-buttons button { font:inherit; font-size:0.78em; color:var(--green); background:transparent; border:1px solid rgba(0,255,65,0.4); padding:5px 12px; cursor:pointer; transition:background 0.15s,border-color 0.15s; }
#image-puzzle-buttons button:hover, #image-puzzle-buttons button.active { background:rgba(0,255,65,0.12); border-color:var(--green); }
#image-display { text-align:center; }
#image-display-img { max-width:90vw; max-height:45vh; border:1px solid rgba(0,255,65,0.3); object-fit:contain; }
#image-clue-container { padding:16px; text-align:center; }
#image-clue-img { max-width:90vw; max-height:50vh; border:1px solid rgba(0,255,65,0.3); object-fit:contain; }

/* UI overlay */
#ui-overlay { position:fixed; top:12px; right:12px; display:flex; flex-direction:column; gap:10px; z-index:500; pointer-events:none; }
#failure-counter { background:rgba(0,0,0,0.7); border:1px solid rgba(0,255,65,0.25); padding:8px 12px; min-width:180px; pointer-events:none; }
.failure-header { display:flex; justify-content:space-between; font-size:0.65em; color:var(--fg); opacity:0.7; margin-bottom:6px; }
.failure-bar-container { height:4px; background:rgba(255,255,255,0.08); }
#failure-bar { height:100%; background:var(--red); width:0%; transition:width 0.3s; }
#audio-player { background:rgba(0,0,0,0.7); border:1px solid rgba(0,255,65,0.2); padding:8px 12px; display:flex; flex-direction:column; gap:6px; pointer-events:all; }
#audio-spectrogram { width:180px; height:40px; background:rgba(0,20,8,0.8); border:1px solid rgba(0,255,65,0.2); }
#skip-button { font:inherit; font-size:0.72em; color:var(--amber); background:transparent; border:1px solid var(--amber); padding:4px 10px; cursor:pointer; pointer-events:all; transition:background 0.15s; }
#skip-button:hover { background:rgba(255,176,0,0.12); }

/* Estilos de texto del juego */
.terminal-line { display:block; }
.terminal-line.system  { color:var(--fg); opacity:0.7; }
.terminal-line.error   { color:var(--red); }
.terminal-line.success { color:var(--green); }
.terminal-line.hint    { color:var(--amber); font-style:italic; }
.terminal-line.special { color:#88bbff; }

/* ─── RESPONSIVE MÓVIL ─── */
@media (max-width:600px) {
    #boot-screen { font-size:0.7em; padding:14px 16px; }
    .os-brand { font-size:1.7em; }
    #bterm-header { padding:8px 12px; }
    .bterm-hline { font-size:0.7em; }
    #bterm-output .bl { font-size:0.8em; }
    #bterm-input-row { padding:8px 12px; }
    #nd-dock { gap:8px; padding:8px 10px; }
    .nd-dock-icon { width:64px; font-size:0.6em; }
    #lib-window { top:2%; height:92vh; }
    #lib-nav { width:140px; }
    .lib-section-title { font-size:1.4em; }
    .lib-line { font-size:0.78em; }
    .welcome-title { font-size:1.6em; }
    #image-display-img { max-height:38vh; }
    #image-clue-img { max-height:42vh; }
}